Enable Specific Dates in Flux Date Picker

[beneyraheem]

Currently, the Flux Date Picker allows setting minimum and maximum date ranges, but it lacks a feature to enable only specific dates while disabling all others. This feature would be useful in scenarios such as:

• Allowing users to select only available appointment slots.
• Enabling only business days while disabling weekends.
• Restricting selection to predefined dates for events or bookings.

Proposed Implementation:
Introduce a new prop, e.g., enabled-dates, which accepts an array of Y-m-d formatted dates:

<flux:date-picker :enabled-dates="['2025-02-10', '2025-02-15', '2025-02-20']" />

When applied:

• Only the specified dates will be selectable.
• All other dates will be visually disabled and non-interactable.
• The feature should work for both single-date and range mode.

Additional Considerations:

• Provide flexibility to combine enabled-dates with min and max props.

This feature will enhance the usability of the Flux Date Picker, making it more versatile for applications requiring controlled date selection.

[joshhanley]

@beneyraheem there isn't an enabled dates, but there is an unavailable attribute you can use, which you could calculate the unavailable dates on the backend instead. See https://fluxui.dev/components/calendar#unavailable-dates for more details.

[beneyraheem]

Oh, my bad! I really didn't see it in the docs. Thank you 😊

[joshhanley]

No worries! 🙂