Ravi Shankar Ravi Shankar - 21 days ago 9
Javascript Question

Displaying Start date less than End date - Datepicker

So, I was trying to display only the dates which are greater than the start date in the 'end date date-picker'. Here, my problem is - if the user selects some start date initially (say 27th September), the end date date-picker is showing dates greater than 27th September, fine. But if he changes the start date for some reason (say 27th September to 25th September), the end date date-picker is still showing the dates greater than the previous start date only (i.e, 25th and 26th are not being highlighted). Attached Screenshot1 and Screenshot2

Here is the required js:

$(document).ready(function() {
var start = new Date();
// var end = new Date();

$("#s_dt").datepicker({
startDate: start,
daysOfWeekDisabled: [0, 6],
autoclose: true,
})
$("#s_dt").on('changeDate', function() {
var st = $(this).datepicker("getDate");
var end = st;
// end.setDate(st.getDate());
console.log(st);
end.toLocaleDateString();
console.log(end);
$('#e_dt').val('');

$("#e_dt").datepicker({
startDate: end,
daysOfWeekDisabled: [0, 6],
autoclose: true,
})

})

})


Thanks in advance...

Answer Source

datepicker has method setStartDatethat you can use to set start date of end date input whenever the start date is changed, instead of initialising it again.

$("#s_dt").datepicker({
    startDate: start,
    daysOfWeekDisabled: [0, 6],
    autoclose: true,
});

//initialize it once without start date
$("#e_dt").datepicker({
    daysOfWeekDisabled: [0, 6],
    autoclose: true,
});

$("#s_dt").on('changeDate', function() {
    var st = $(this).datepicker("getDate");
    var end = st;
    console.log(st);
    end.toLocaleDateString();
    console.log(end);

    //use setStartDate to change startdate property dynamically
    $('#e_dt').val('').datepicker('setStartDate', end);             
});