Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add date picker component (full accessibility support) #2994

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

sovetski
Copy link

@sovetski sovetski commented Apr 22, 2024

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):

image
image

Demo with button toggle (works like menu):

image

Some related issues:

Discussions:

@axzilla
Copy link

axzilla commented Apr 23, 2024

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
Copy link
Author

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
Copy link
Owner

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.

@jacksonthall22
Copy link

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
Copy link
Author

sovetski commented Jun 6, 2024

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

@gitmalong
Copy link

gitmalong commented Jun 28, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants