Disable specific dates in date picker

Forms
1

I am using a Plumsail form and I want disable specific holidays from being selected in the form.

2

Hello @cortese98,

You can disable specific dates with code:

fd.field('Date').widgetOptions = {

    disableDates: [new Date(2020,6,1)],
}
3

Thank you, I already have some script disabling other days of the week and can't seem to combine the two scripts. Can you suggest how I add specific dates to the script I already have?

fd.field('Date').widgetOptions = {
disableDates: ["tuesday","wednesday","thursday","friday","saturday","sunday"],
};
});

4

@cortese98,

You can use the code below to disable certain dates and days of the week.
You need to use the corresponding index of the day of the week in the code:
Monday - 1
Tuesday - 2
Wednesday - 3
Thursday - 4
Friday - 5
Saturday - 6
Sunday - 0

fd.field('Date1').widgetOptions = {

disableDates: function (date) {
    console.log(date)
                var disabled = [new Date(2020,9,28)];
                if(date){
                    //disable sunday (0) and Saturday (6)
                    return date.getDay() === 0 || date.getDay() === 6 ||disabled.map(Number).indexOf(+date) >= 0
                }
            }
}
5

I can't seem to get the disabling of both the days of the week and specific dates to work. Is there an option to change the color on specific dates? So I could gray out holidays instead of making them disabled?

6

Hello @cortese98,

When the date is disabled, it is greyed out.

Have you tried the code that I've shared? Please share the code that you are using.

7

I decided to try and do a validation error instead. This is not working either. I want to have an error show when a company holiday is selected.

fd.Rendered(function() {
fd.field('Monday').validators;

fd.field('Monday').validators.push({
    name: 'MyCustomValidator',
    error: '',
    validate: function(value) {
        if (fd.field('Monday').value == '2021-07-05') {
        this.error = 'You have selected a holiday, please select another date';
        return false;
      }
        return true;
    }
 });

});

8

Hello @cortese98,

To compare two dates, you need to use the valueOf() method that converts the date into milliseconds. Please test this code:

fd.field('Monday').validators.push({
    name: 'MyCustomValidator',
    error: '',
    validate: function(value) {
        if (new Date('2021-07-05').valueOf() == value.valueOf()) {
        this.error = 'You have selected a holiday, please select another date';
        return false;
      }
        return true;
    }
 });
});
9

That did not work as expected. No validation error occurred and the form was able to be submitted.

10

@cortese98,

Please export the form and share it to troubleshoot the issue.

You can share the template here or send it to support@plumsail.com