Add settings to disable dates in flatpickr webform field

Thank you!

I think that we should implement this in a more generic way.

The new option could be in DateTimeFlatPickrWidgetTrait.php

And that could work in the widget settings as well as in the Element, and in the better exposed filters widget.

Then all settings could be made available in the webform similarly to how it was done in the better exposed filter widget (FlatpickrDateBef.php)

@nagy.balint, you are right. I'm uploading and updated patch to serve my current needs and will investigate a more generic way, as you say when I have more time. The patch is updated with date format validation. Removed the native dates of the week management as they use backend validation, but I need js validation without submission of the form. Added new way of disabling the days of the week.

Created new patch based on version 3.0.4 moved functionality to trait to be used for all widgets and webform elements

Improved patch containing config schema changes

Fixed bug when no disabled dates are added

Thanks!

I'm able to disable dates when building the webform, but each disabled date is one day behind when the calendar appears. Here's a few of my disabled dates:

2025-04-29
2025-05-05
2025-05-15
2025-05-20
2025-05-27

Image attached shows which dates are disabled.

On the tag for the calendar, the correct disabled dates are listed in data-flatpickr-settings:

<input min="2025-05-22" data-min-year="2025" max="2025-12-31" data-max-year="2025" type="text" data-flatpickr-settings="{'disable':['2025-03-06','2025-03-10','2025-03-18','2025-03-20','2025-03-27','2025-03-29','2025-03-30','2025-04-07','2025-04-23','2025-04-25','2025-04-29','2025-05-05','2025-05-15','2025-05-20','2025-05-27','2025-06-15','2025-06-21','2025-06-22','2025-07-10','2025-07-15','2025-07-30','2025-08-02','2025-08-03','2025-08-04','2025-08-05','2025-08-06','2025-08-07','2025-08-08','2025-08-09','2025-08-10','2025-08-11','2025-09-10','2025-09-15']}" data-drupal-selector="edit-desired-date-items-2-item-" flatpickr-name="desired_date[items][2][_item_]" id="edit-desired-date-items-2-item-" name="desired_date[items][2][_item_]" value="" size="60" maxlength="128" class="form-text form-control flatpickr-input" data-once="datetime-flatpickr datetime-flatpickr-webform" readonly="readonly">

This happening to anybody else?

Including screenshot of HTML, showing which dates are disabled on the calendar.

Note the dates are different from the <input> tag.

Silly me, I was using an old version of the patches above. Can confirm the dates are correct in the latest 3.0.5 release.

Automatically closed - issue fixed for 2 weeks with no activity.