second datepicker gets starting date from first datepicker

Hello again,

This can be achieved, but it will require a bit of custom scripting. Since you are using one of our Pro plans, for your described scenario please add the following code snippet in the Custom JS section:

document.addEventListener('kaliFormProcessConstructed', function(evt){
    var startDate = flatpickr('#startDate');
    var endDate = flatpickr('#endDate');
    
    startDate.config.onChange.push(function(date){
        var nextDay = new Date(date);
        nextDay.setDate(nextDay.getDate() + 1)
        endDate.clear();
        endDate.set('minDate', nextDay)
    });
})

For this to work your two Date and Time picker fields need to have the ids: startDate and endDate. With the above script once you make a selection in the startDate field, when you open the endDate field the minimum date will be the date selected in the first field +1 day.

If you want the same date to be selectable in the endDate field then you will only need to comment out the following line from the code:

nextDay.setDate(nextDay.getDate() + 1)

We will definitely add this type of option in one of our future versions so you can configure this directly from the field instead of having to use a custom script.

Thanks!
That’s great.
Good idea to include this in the field settings in a future version.

Hello again,

After I performed several additional tests I noticed an improvement that can be made to the script, please replace the previously offered script with this one:

document.addEventListener('kaliFormProcessConstructed', function(evt){
    var startDate = document.getElementById('#startDate')._flatpickr;
    var endDate = document.getElementById('#endDate')._flatpickr;
    
    startDate.config.onChange.push(function(date){
        var nextDay = new Date(date);
        nextDay.setDate(nextDay.getDate() + 1)
        endDate.clear();
        endDate.set('minDate', nextDay)
    });
})

With the latest release of Kali Forms that just rolled out you no longer need this custom script, you can define this directly from the field configuration.

When editing your Date and Time picker field you will have a new option available: Start date depending on other date picker?, you just need to select your first field in this setting and the date you select in that field will be the minimum date available in your current field.

You can also add additional days to this limit with the help of the Offset dependency option. This will add your entered offset to the date selected in the first field, for example if you select the 1st of January in the first field and set the offset to 2, then your current field will only allow selections starting from the 3rd of January.