Date Picker?

[Crypt0Jesus]

Any recommendations for a date picker that plays well with DaisyUI? I'm currently using SvelteKit.

[saadeghi]

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:

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

[saadeghi]

Looks good.
This also gives custom CSS variables to set colors.

[Crypt0Jesus]

Thanks. I got svelty-picker to work. Question, what does hal(var(--bc)) do? Does it let me reference my theme already in DaisyUI?

[Crypt0Jesus]

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

[saadeghi]

Yeah. It was typo. It's hsl

See this table here https://daisyui.com/docs/colors/

[pguardiario]

just the basic html5 date input works fine for most things

[afrifans]

This doesn't have range dates also

[officefish]

Any progress?!

[saadeghi]

Progress?

[officefish]

I meen do you have plans make date picker as daizyUI component as well?!

[saadeghi]

You can either use the standard HTML <input type="date"> or use a JS package for it.
daisyUI is CSS. I can't make a date picker with CSS.

[officefish]

Thank you for explanation!

[EvgeniiaVak]

With the newer version it's not hsl it's oklch that made it work. Here is my secondary color example (also with https://date-picker-svelte.kasper.space/docs )

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