flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Feature: Date picker: Allow only some dates

Open Sleepful opened this issue 1 year ago • 2 comments

Lets say I have an event scheduling app for corporate meetings. I want the Manager user to indicate which days of the week they are available for a meeting, then I want to show the DatePicker to the Employee user with only those days available as inputs.

This is similar to min/max date: https://github.com/themesberg/flowbite/issues/417

The difference is that the range of available dates might not be a continuous segment of days in a row.

You may imagine something similar to Calendly scheduling calendar:

https://calendly.com

I know that the min/max dates are passed to the component as HTML ~~data~~ attributes.

However, this feature might be better served by JS API. I am uncertain about the specific implementation that would be better, but also I have no preference

Sleepful avatar Jul 26 '24 21:07 Sleepful

Looks like this is already supported behavior by the underlying library, it just needs to be added to the flowbite docs/interface type:

https://github.com/themesberg/flowbite-datepicker/issues/30#issuecomment-1875198757

Sleepful avatar Jul 26 '24 21:07 Sleepful

This code:

https://github.com/themesberg/flowbite/blob/main/src/components/datepicker/index.ts#L143-L184

makes it such that only "allowed" options can be passed down to the underlying component, walling-off the ones that aren't explicitly documented (but still available). Would be nice to just pass the entire _options object and give full access to the underlying https://github.com/mymth/vanillajs-datepicker options.

Sleepful avatar Jul 26 '24 22:07 Sleepful