Date Picker? #619
-
|
Any recommendations for a date picker that plays well with DaisyUI? I'm currently using SvelteKit. |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 10 replies
-
|
Any datepicker that allows CSS styling would be good and you just need to set a few colors. You can set daisyUI background color and foreground color to it like this: :root {
--date-picker-background: hsl(var(--b1));
--date-picker-foreground: hsl(var(--bc));
}So it would look good on both dark themes and light themes. Let me know if you need more help. |
Beta Was this translation helpful? Give feedback.
-
|
Looks good. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. I got svelty-picker to work. Question, what does hal(var(--bc)) do? Does it let me reference my theme already in DaisyUI? |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I figured out what you mean. Thanks! --sdt-primary: hsl(var(--pf));
--sdt-clear-color: hsl(var(--s));
--sdt-today-bg: hsl(var(--p));
--sdt-btn-bg-hover: hsl(var(--nf));
--sdt-bg-main: hsl(var(--b1));
--sdt-btn-header-bg-hover: hsl(var(--nf));
--sdt-color: hsl(var(--nc)); |
Beta Was this translation helpful? Give feedback.
-
|
Yeah. It was typo. It's See this table here https://daisyui.com/docs/colors/ |
Beta Was this translation helpful? Give feedback.
-
|
just the basic html5 date input works fine for most things |
Beta Was this translation helpful? Give feedback.
-
|
This doesn't have range dates also |
Beta Was this translation helpful? Give feedback.
-
|
Any progress?! |
Beta Was this translation helpful? Give feedback.
-
|
Progress? |
Beta Was this translation helpful? Give feedback.
-
|
I meen do you have plans make date picker as daizyUI component as well?! |
Beta Was this translation helpful? Give feedback.
-
|
You can either use the standard HTML |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for explanation! |
Beta Was this translation helpful? Give feedback.
-
|
With the newer version it's not :root {
--date-picker-background: oklch(var(--s));
--date-picker-foreground: oklch(var(--sc));
--date-picker-highlight-border: oklch(var(--s));
--date-picker-highlight-shadow: oklch(var(--s));
--date-picker-selected-color: oklch(var(--s));
--date-picker-selected-background: oklch(var(--p));
} |
Beta Was this translation helpful? Give feedback.
Any datepicker that allows CSS styling would be good and you just need to set a few colors.
For example this one: https://date-picker-svelte.kasper.space/docs
You can set daisyUI background color and foreground color to it like this:
So it would look good on both dark themes and light themes.
Other datepicker libraries might not give you variables like this one but you can rewrite the css colors in most of them.
Let me know if you need more help.