I put a new datepicker into a admin page and it lets me select the date needed but when I had data-date-format="yyyy/mm/dd" as dd/mm/yyyy, it would not save the date in the database and would save it as 0000-00-00 so I changed the format to data-date-format="yyyy/mm/dd" and it works now and saves the date correctly now in the database but is there any way I can have the date format as dd/mm/yyyy in the input field as it currently shows as 2019/10/22
The code I have is below
<div id="exstdate" class="col-lg-6 input-group date" data-date-format="yyyy/mm/dd">
<input type="text" class="form-control" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><div class="error alert-danger"></div>
</div>
<script>
$(function () {
$("#exstdate").datepicker({
language: "en",
autoclose: true,
todayHighlight: true,
dateFormat: 'dd/mm/yyyy'
}).datepicker('update', new Date());
});
</script>
Related
Suppose I change the start date and click on End Date before render the start date. Then datepicker of End date will be close because of rendering of start date value. If you have any solution or any datepicker suggestion, please help me.
Blade File
<div class="col">
<label for="">Start Date <span class="text-danger">*</span></label>
<input type="text" name="start_date" wire:model.lazy='start_date'
class="form-control #error('start_date') is-invalid #enderror">
#error('start_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
<div class="col">
<label for="">End Date <span class="text-danger">*</span></label>
<input type="text" name="end_date" wire:model.lazy='end_date'
class="form-control #error('end_date') is-invalid #enderror">
#error('end_date')
<small class="text-danger">{{ $message }}</small>
#enderror
</div>
My Script Code for Datepicker
<script>
$('input[name=start_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=start_date]').on("dp.change", function(e) {
#this.set('start_date', e.target.value);
});
$('input[name=end_date]').datetimepicker({
format: "DD/MM/YYYY",
disabledDates: false,
useCurrent: false,
showClear: true,
showClose: true,
showTodayButton: true,
});
$('input[name=end_date]').on("dp.change", function(e) {
#this.set('end_date', e.target.value);
});
</script>
If I'm not misunderstand you question why you use "wire:model.lazy" ? "wire:model" remove .lazy might be fixed your problem?
I am using an input for the date. How do we set the Input to display the Date Today? Thank you for your time.
<div class="form-group">
<label>Debarred</label>
<input v-model="form.debarred" type="date" name="debarred"
placeholder="Debarred"
class="form-control" :class="{ 'is-invalid': form.errors.has('debarred') }">
<has-error :form="form" field="debarred"></has-error>
</div>
You can update the model value form.debarred on page load like:
this.form.debarred = new Date().toLocaleDateString('en-CA');
//==> "2020-04-03"
Now, using .toLocaleDateString('en-CA') is need here as <input type="date"> value can only accept a string representing a date in YYYY-MM-DD format, or empty.
DEMO:
const debarred = document.querySelector('[name=debarred]');
debarred.value = new Date().toLocaleDateString('en-CA');
<div class="form-group">
<label>Debarred</label>
<input type="date" name="debarred" placeholder="Debarred" class="form-control">
<has-error :form="form" field="debarred"></has-error>
</div>
<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
type="text"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
import { BsDatepickerConfig } from'ngx-bootstrap/datepicker';
export class CardlessTransactionsComponent implements OnInit {
datePickerConfig: Partial<BsDatepickerConfig>;
privatetodayDate: Date = newDate();
minDate: Date;
maxDate: Date;
}
constructor(privatefb:FormBuilder) {
this.todayDate = newDate();
this.minDate = newDate();
this.maxDate = newDate();
this.minDate.setDate(this.minDate.getDate() - 7);
this.maxDate.setDate(this.maxDate.getDate() + 0);
at the HTML file, I think there is something need to do inside the bsValue while at the ts file, I have no idea where to change to get the output that I want which is to make it display the month's name instead of the month numeric value
You should get today's date through a formControl instead of outside it to get this working...
relevant HTML:
<div class="row">
<div class="col-sm-8">
<i class="far fa-calendar-alt"></i>
<input
id="dtpFrom"
placeholder="Datepicker"
placement="top"
class="form-control"
bsDatepicker
formControlName="dateMDY"
[bsConfig]="{dateInputFormat: 'DD MMM YYYY',containerClass: 'theme-blue'}"
[bsValue]="todayDate"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
</div>
working stackblitz here
Thanks for the suggestions, i have already figure it out. (make changes at the TS file)
initializeForm () {
this.cardlessForm= this.fb.group ({
dateFrom:new Date(),
dateTo:new Date ()
});
}
I just add the 'new Date ()' at the dateFrom and dateTo then i removed the code ( this.maxDate.setDate(this.maxDate.getDate() + 0);
I am developing a simple check-in and check-out form with Datepicker and I made it to always display the checkin as today, and checkout as tomorrow.
<?php
$today = date("Y-m-d");
$tomorrow = new DateTime('tomorrow');
?>
<div class="row">
<input type="text" class="datepicker" name="datein" value="<?php echo $today; ?>" readonly='true'>
<input type="text" class="datepicker" name="dateout" value="<?php echo $tomorrow->format('Y-m-d'); ?>" readonly='true'>
</div>
And I want the checkout date to be always the checkin + 1 day.
Is there a way to dynamically check the checkin value and update the checkout on any event, or should I take a different approach?
Thank you
Try this
<input id="checkIn" type="text" class="datepicker" name="datein" value="" readonly='true'>
<input id="checkOut" type="text" class="datepicker" name="dateout" value="" readonly='true'>
$(function () {
var dateToday = new Date(new Date().getTime();
var oneDayAhead = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
$("#checkIn").datepicker({
changeMonth: true,
minDate: dateToday,
dateFormat: 'yy-mm-dd',
});
$("#checkOut").datepicker({
changeMonth: true,
minDate: oneDayAhead,
dateFormat: 'yy-mm-dd',
});
});
What this basically does is, it will restrict checkout time one day ahead of current time, You can modify this to suit your needs
I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works.
<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
v-model="sale.cancelDate"
v-bind:class="{ 'has-error': !validation.cancelDate }"
v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>
The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...
var self = this;
$(self.el).datepicker({
startDate: self.params.startDate,
endDate: self.params.endDate,
todayBtn: "linked",
autoclose: true
});
How can I get the start-date to appear dynamically?
I post an example here:
//script.js
new Vue({
el:"#app",
data:function(){
return {
startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
cancelDate: moment().format('MM/DD/YYYY')
}
},
ready:function(){
$('.datepicker').datepicker({ startDate: this.startDate });
}
})
// index.html
<div id="app">
<input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>
https://jsfiddle.net/nosferatu79/jfk97gp9/4/
Hope this help...