Conditionally disable dates in a datatable based on value in other column

Forms Public Forms
1

Hi,

Is it possible to dynamically disable dates within a column of a datatable control?

I have the following datatable:

image
image895×279 12.3 KB

When the user selects the day of the week in the first column, I want the date picker for the start date and end date columns to only allow dates for that day of the week to be selected, all other dates would be disabled for the other 6 days of the week.

I would also require individual dates to be disabled (such as Christmas Day), if the above is possible can it also be combined with disabling individual dates.

Any help would be greatly appreciated.

Regards,

Callum

2

Hello @wilsonc,

You can disable week days and specific dates using the below code. Replace DateColumnName and DayColumnName with the Names of the columns in Data Table control.

const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
fd.control('DataTable1').$on('edit', function(e) {
    console.log(e)
    if (e.column.field === 'DateColumnName') {
        if (e.model.DayColumnName) {
            e.widget.setOptions({
                disableDates: function(date) {
                    //dates to disable
                    var dates = [new Date(2025, 3, 1), new Date(2025, 7, 1), new Date(2025, 9, 28)];
                    if (date) {
                        //disable Sunday (0), Saturday (6) and specified dates
                        return date.getDay() !== weekDays.indexOf(e.model.Approver) || dates.map(Number).indexOf(+date) >= 0
                    }
                }
            })
        }

    }
});
3

Hi @Margo

Thank you very much for your help with this.

It's all working great!

Regards,

Callum