Add date picker component (full accessibility support)

[sovetski]

Hi,

As I really like this library, I wanted to contribute to its development. I noticed that there are quite a few people looking for a date picker component, so I took the opportunity to create one, because I'll probably need it myself in the future.

I've tried to make this component 100% accessible, but there are certainly improvements to be made. If there's a chance that this component will be accepted, I can try to improve it based on your feedback.

Since the component is accessible, the HTML side of things is a bit verbose, but hey, that's the price to pay to make everyone happy 😅

Certainly, as already indicated in the created issues, it's only the visual part. The JavaScript part will need to be done by developers; perhaps we could provide a working example in JavaScript to give an idea, similar to what's done here: Theme Controller Example.

Demo (with light/dark modes but works with all themes as expected):

Demo with button toggle (works like menu):

Some related issues:

• Created: Datepicker Component #955
• Suggestion: Datepicker component #552
• Add Date Picker component #112
• [Request] Date picker #51
• Add datepicker component #45

Discussions:

• Date Picker? #619
• Date/datetime field #2049
• Feature request: Add date picker #1558
• Is there any plan to add date picker component ? #1441
• Calendar Component #633
• Created: Datepicker Component #1004
• Calendar 🗓️ #2878

[axzilla]

I think Daisy should remain a CSS library. Why not just take a headless component framework like Bits UI (https://www.bits-ui.com/docs/introduction) and design it with Daisy?

[sovetski]

I think Daisy should remain a CSS library. Why not just take a headless component framework like Bits UI (https://www.bits-ui.com/docs/introduction) and design it with Daisy?

It still a CSS library, this PR does not includes anything else than CSS

[saadeghi]

As much as I would love to include a datepicker UI in daisyUI and there are indeed a lot of requests for that,
Manually implementing the JS logic of datepicker is not easy. Almost everyone prefers to use an existing datepicker JS package instead of manually dealing with all the calendar quirks.

This PR adds the visual (thanks @sovetski) but if we're expecting devs to manually implement a fully working JS datepicker logic for their apps, that's not realistic.

I think it would be more practical if we just use existing JS datepicker packages and only apply daisyUI colors and styles (border radius, etc) for them. This way, people can simply use an existing datepicker JS package, and it would fit perfectly with their daisyUI theme.
The challenge is compatibility with different datepicker packages because each of them use their own HTML structure, so each of them would need an exclusive style (probably a few lines of @apply) to set daisyUI colors for their elements.

[millette]

I searched the issue of styling type="date" and found these helpful links:

• https://dev.to/codeclown/styling-a-native-date-input-into-a-custom-no-library-datepicker-2in
• HTML5 forms widgets are broken by the forms component foundation/foundation-sites#1877 (comment)
• https://stackoverflow.com/questions/76844615/how-to-style-the-calendar-icon-in-a-date-input

Hope this helps other daisyui users :-)

[jacksonthall22]

This looks awesome, I'm disappointed this won't be added - just my 2 cents. It could pair nicely with Melt when they release 1.0 for example.

@sovetski, could you provide the code for those examples?

[sovetski]

@jacksonthall22 thank you for your feedback! You can find the code here. Let me know if it is not clear

[gitmalong]

I am using DaisyUI as a pure CSS library as I am working with a quite exotic WASM stack. For me it would make sense to add it without JS stuff as OP proposed.

[GerwazyMiod]

I would second @gitmalong opinion.
I'm using DaisyUI with Leptos and it would be great to have bare-minumum calendar component on which I could tag important dates, I don't need anything else.

[tejasv-tagline]

Is this PR going to merge in the future?

[saadeghi]

@tejasv-tagline I appreciate @sovetski's effort 👏
This PR won't be merged, as this approach would need implementing the logic of the calendar manually, which is not something majority of developers would want to do, instead, they prefer using existing calendar libraries. At the end, background logic of how a calendar works, is not opinionated so it makes sense to always use a third-party library for the logic and it is what everyone is doing anyway.

Good news is daisyUI 5 (coming next month) will include styles for 3 calendar libraries:

• Cally (Web component - works everywhere) https://wicky.nillia.ms/cally/
• DayPicker (React) https://daypicker.dev/
• Pikaday (JS - Works everywhere) https://pikaday.com/

Example with alpha version:
https://codepen.io/saadeghi/pen/GgKZLvR?editors=1000