I am using jQuery Datepicker and i have same change in jQuery but something went wrong in this.
All Working fine as my requirement but when I select date from December 2020 in start date than all Dates of End date is disable.
And this is happing only when I select December 2020's dates.
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1], from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +f.getMonth()+ "/" +f.getDate();
var datestr= from[2]+ "/" +f.getMonth()+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>Javascript months are 0-based, but your input is 1-based, so you need to convert
var f = new Date(from[2], from[1]-1, from[0]);
It fails as there's no 13th month, so gets "confused".
As you're not using the date itself, but reformatting back to a string, you also need to convert back on those lines:
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
if (jQuery('#datetimepicker1').length > 0) {
jQuery('#datetimepicker1').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
onChangeDateTime: function(dp, $input) {
var from = $input.val().split("/");
var f = new Date(from[2], from[1]-1, from[0]);
f.setDate(f.getDate());
var datemin = f.getFullYear()+ "/" +(f.getMonth()+1)+ "/" +f.getDate();
var datestr= from[2]+ "/" +(f.getMonth()+1)+ "/" +from[0];
$("#datetimepicker2").datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
changeMonth: f.getMonth(),
changeYear: f.getFullYear(),
minDate: new Date(datemin),
startDate:datemin,
});
}
});
}
if (jQuery('#datetimepicker2').length > 0) {
jQuery('#datetimepicker2').datetimepicker({
lang: 'ch',
timepicker: false,
format: 'd/m/Y',
formatDate: 'Y/m/d',
maxDate: 0,
});
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<input id="datetimepicker1" type="text" placeholder="Start Date"/>
<input id="datetimepicker2" type="text" placeholder="End Date"/>