[Resolved] Limit date ranges in form date picker

[Author]

Posts

[Marcel]

This is a follow up question for this ticket: https://toolset.com/forums/topic/relationship-form-6/.

The reservation post type has 2 custom date fields: arrival date and departure date. People should only be able to select dates within a certain timeframe in the future, AND the departure date should be later than the arrival date.

I tried to use the solutions in this topic: https://toolset.com/forums/topic/limit-date-range-for-cred-form-date-field/ and in this topic: https://toolset.com/forums/topic/multiple-datepickers-date-range-restriction/ but can't get those to work. I added the code to the forms js editor.

I tried this code:

jQuery(window).bind("load", function() {
jQuery('.js-wpt-date[name^="wpcf-aankomstdatum"]').last().datepicker('option',{minDate: 0,maxDate: 90});
});

Where "aankomstdatum" is the name of the arrival date field. I also tried this code:

jQuery(document).on('cred_form_ready', function() {

jQuery( '[id^=cred_form_9010_1_1_aankomstdatumdisplay-only-28-7]' ).datepicker({
minDate: -60,
maxDate: -1
});

});

Where the id is the id of input type="text". I also tried id "cred_form_9010_1_1_aankomstdatumdatepicker", which is from input type=hidden, and id "cred_form_9010_1_1_aankomstdatum".

[Nigel]

Hi there

This can be a bit tricky to get right.

On my local test I had the first part working (start date must be in the future for up to 90 days), now I need to add the second part where the end date is tied to the date chosen for the start date, but I've overrun my time today.

Please bear with me, I'll share the solution in the morning.

[Marcel]

If it was easy, I wouldn't need you 😉

No hurry 🙂

[Nigel]

OK, this should do the trick.

You'll want to add this code to the custom JS section of your form. You will need to edit your custom field slugs for the start and end dates (in the example the field slugs are "start-date" and "end-date".

jQuery(window).bind("cred_form_ready", function() {

    // register callback for when start date is set to update end date
    const toolset_date_range_handler = function( date, datepicker ) {
        // date isn't ready in time, so create the date
        date = new Date( datepicker.selectedYear, datepicker.selectedMonth, datepicker.selectedDay );
        // update the minimum end date to match the chosen start date
        jQuery("input[name='wpcf-end-date[display-only]']").datepicker('option', 'minDate',  date );
    };    

    // limit date range for start date (& end date initially) & add start date event listener
    jQuery("input[name='wpcf-start-date[display-only]']").datepicker('option', {minDate: 0, maxDate: 90, onClose: toolset_date_range_handler});
    jQuery("input[name='wpcf-end-date[display-only]']").datepicker('option',{minDate: 0,maxDate: 90});

});

[Marcel]

Hi Nigel,

Sorry for my late reply, this seems to work so thank you very much!

Best regards,

Marcel