Date Picker
A date input that opens a calendar in a popover.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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 />