-
-
Notifications
You must be signed in to change notification settings - Fork 265
/
date-picker-demo.svelte
33 lines (30 loc) · 1 KB
/
date-picker-demo.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script lang="ts">
import CalendarIcon from "lucide-svelte/icons/calendar";
import { DateFormatter, type DateValue, getLocalTimeZone } from "@internationalized/date";
import { cn } from "$lib/utils.js";
import { Button } from "$lib/registry/default/ui/button/index.js";
import { Calendar } from "$lib/registry/default/ui/calendar/index.js";
import * as Popover from "$lib/registry/default/ui/popover/index.js";
const df = new DateFormatter("en-US", {
dateStyle: "long",
});
let value: DateValue | undefined = undefined;
</script>
<Popover.Root>
<Popover.Trigger asChild let:builder>
<Button
variant="outline"
class={cn(
"w-[280px] justify-start text-left font-normal",
!value && "text-muted-foreground"
)}
builders={[builder]}
>
<CalendarIcon class="mr-2 h-4 w-4" />
{value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date"}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0">
<Calendar bind:value initialFocus />
</Popover.Content>
</Popover.Root>