Disabling dates within the date input component

App Building
1

I would like to disable not only the past in a date input but also for example every Wednesdays, Thursdays and Fridays.

I´ve tried with this codes inside the disable field:

date => {
const dayOfWeek = new Date(date).getDay();
return dayOfWeek !== 1 && dayOfWeek !== 2; // Nur Montag (1) und Dienstag (2) sind erlaubt
}

OR

{{ new Date(date).getDay() !== 1 && new Date(date).getDay() !== 2 }}

Has anyone an idea how I can achieve to make it impossible to select a specific dates within the date input?

And I'm not talking about validation - the dates have to be greyed out.

2

Hello @TomJaud,

Apologies for the issue with the calendar input.

Let me raise this to our UI engineers as I tested out the example provided in the tool tip for 'Custom Rule' and that did not work. So unless they show me how to use it correctly I will be filing a bug report on this :saluting_face:

3

Hi @TomJaud,

Figured out how to get the custom rule to apply!

To disable Mondays, for example, you would use the following code snippet. As Mondays are represented with 1.

{{ new Date(self.value + 'T00:00').getDay() === 1 ? 'Mondays are invalid' : '' }}

So to apply this for Wednesday you would do 3, Thursday 4, Friday 5 and chain them together with or causes ||

Unfortunately this will not grey out those days, as it will apply a validation level limitation.

To grey out all days before the current day, you would want to use
{{ new Date().toDateString()}} for min date.

I am checking to see if there is some other workaround for having custom rules grey out days that would eval to true.

I believe that the custom rule can't apply until a day is clicked/selected and then the code runs. Whereas min or max date applies a CSS style to grey out and make days un-clickable when the component is first rendered as it can compare days to these specified day put into the GUI.