Home > Software design >  Issue in jQuery Datepicker while selecting Start date and End date
Issue in jQuery Datepicker while selecting Start date and End date

Time:09-22

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"/>

CodePudding user response:

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];

  • Related