search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.99k stars 746 forks source link

Feature: Date picker: Allow only some dates #936

Open Sleepful opened 4 months ago

Sleepful commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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.