Two Datepicker which depend on each other

[jopep100]

Hey there, I wanna use your date picker. But I don't know how I can solve my "problem".
I want two date pickers, when I select a date in the first one, I want that its only possible to select dates after that date in the seance one.

[ghost]

Hi there! I did this a days ago and work very well:

$(document).on('change', '#first-input-calendar', (e) => {
    e.preventDefault();

    const date = $(e.target).val();
    $('#last-input-calendar').datepicker('setStartDate', date);
    $('#last-input-calendar').datepicker('setDate', date);
});

Hope this works for you! :)

[marko-stimac]

This works great, but is it also possible to focus on month? If today is March and in first datepicker selected date is somewhere in August, then the second date when selecting should show August. Currently it just starts from March so user has to click multiple times towards August.

[ghost]

Do you need to add months to the current selected date? For example: You select March 26th and need to focus August 26th, so you add 5 months. Am I right?

[marko-stimac]

I was thinking about using the code without setDate on second datepicker since by design we have one form which passed data onto second form and I didn't wanted to override data. So I was thinking about only focusing that month in second datepicker without actually setting new date. But talking with my colleagues it seems better to fully follow your code. Thanks again :)

[ghost]

I'm glad for helping you! But if you later want to implement the pre-focused month you will need to set the date to the wanted month with 'setDate' and use the startView property for start selecting by the month.

[DavidGilmour73]

I wanted to do exactly what you wanted to do if I understand correctly. When you select the date in the first datepicker, have the second datepicker move to that same month and disable the dates before the first datepicker but not have the date entered into the input field it is tied to. I know this was posted several months ago but I wanted to share my solution in case anyone else looking to do this found it helpful. So here it is.

$(document).on('change', '#txtDepart', (e) => {
    e.preventDefault();
    //Get text values for depart and return
    const departText = $(e.target).val();
    const returnText = $('#txtReturn').val();
    //Get dates for depart and return
    var departDate = new Date(departText);
    var returnDate = new Date(returnText);  
    //If retrun date is blank or before depart date configure the calendar end delete textbox value
    if (returnText == '' || returnDate < departDate) {        
        $('#txtReturn').datepicker('setStartDate', departText);
        $('#txtReturn').datepicker('setDate', departText);
        $('#txtReturn').val('');
    }
});