Dynamic date widget options

I am trying to update the minimum and maximum values available in the date selector based on the value given in a previous field. I believe all my code is running without issue but I cannot figure out how to get the options for the 2nd date to update when a change to the first occurs. Can anyone help me with what I need to add to do this?

//Clear Plumsail local storage items
localStorage.clear();

//Set form culture
fd.culture = 'en-GB';

// Function to show hide port date field
fd.rendered(function() {
    
    function hideshowPortDate() {
        if (fd.field('Collect').value == null) {
            fd.field('Transfer').hidden = true;
            
            fd.field('Transfer').required = false;
        }
        else {
            fd.field('Transfer').hidden = false;
            
            fd.field('Transfer').required = true;
        }
    }
    
    // Calling upon form load
    hideshowPortDate();

    // Calling upon field change
    fd.field('Collect').$on('change',hideshowPortDate);
});

//Set collection date options
fd.rendered(function(){
    var today = new Date();
    var minDate = today.setDate(today.getDate()+5);
    var maxDate = new Date("11/15/24");

    fd.field('Collect').widgetOptions = {
        min: new Date(minDate),
        max: new Date(maxDate),
        disableDates: ['sa', 'su'],
        start: 'day'
    }
});

//Set transfer date options
fd.rendered(function(){
    var today = new Date();
    var minDate = new Date(fd.field('Collect').value); // I NEED THIS VARIABLE TO UPDATE WHEN THE FIELD VALUE CHANGES
    var maxDate = new Date("10/15/24");
                
    fd.field('Transfer').widgetOptions = {
        min: new Date(minDate),
        max: new Date(maxDate),
        disableDates: ['sa', 'su'],
        start: 'day'
    }
});

Hello,

I was working on a problem similar to this yesterday.

I added an on change function which triggered when a value was changed in one or the other date fields.

//Code below stop users from selecting an EndDate < StartDate
fd.field('ProjectStartDate').$on('change',function(value){

    var selectedDate = new Date(value)
    var minDate = selectedDate
    
    fd.field('ProjectEndDate').widgetOptions = {
        min: new Date(minDate)
    }
});

//Code below stop users from selecting a StartDate > EndDate
fd.field('ProjectEndDate').$on('change',function(value){

    var selectedDate = new Date(value)
    var maxDate = selectedDate
    
    fd.field('ProjectStartDate').widgetOptions = {
        max: new Date(maxDate)
    }
});

Make sure you the code is running inside the fd.spRendered event or else it won't work.

1 Like