Date Picker
A date input that opens a calendar in a popover.
<script lang="ts">
import { DatePicker } from "$lib/components/ui/date-picker";
import type { DateValue } from "@internationalized/date";
let value = $state<DateValue | undefined>(undefined);
</script>
<DatePicker bind:value />Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initAdd `popover`
, `calendar`
, and the date dependency, then copy the source into $lib/components/ui/date-picker.
npx lily-svelte@latest add popover calendar
npm install @internationalized/dateUsage
<script lang="ts">
import { DatePicker } from '$lib/components/ui/date-picker';
import type { DateValue } from '@internationalized/date';
let value = $state<DateValue | undefined>(undefined);
</script>
<DatePicker bind:value />