Docs
Date Picker
Date Picker
A date picker component with range and presets.
Loading...
<script lang="ts">
import { Calendar as CalendarIcon } from "radix-icons-svelte";
import {
type DateValue,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { Calendar } from "$lib/components/ui/calendar";
import * as Popover from "$lib/components/ui/popover";
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-[240px] 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" align="start">
<Calendar bind:value />
</Popover.Content>
</Popover.Root>
<script lang="ts">
import { Calendar as CalendarIcon } from "lucide-svelte";
import {
type DateValue,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { Calendar } from "$lib/components/ui/calendar";
import * as Popover from "$lib/components/ui/popover";
const df = new DateFormatter("en-US", {
dateStyle: "long"
});
let value: DateValue | undefined = undefined;
</script>
<Popover.Root openFocus>
<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>
Installation
The Date Picker is built using a composition of the <Popover /> and either the <Calendar /> or <RangeCalendar /> components.
See installations instructions for the Popover, Calendar, and Range Calendar components.
Usage
<script lang="ts">
import { Calendar as CalendarIcon } from "lucide-svelte";
import {
type DateValue,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { Calendar } from "$lib/components/ui/calendar";
import * as Popover from "$lib/components/ui/popover";
const df = new DateFormatter("en-US", {
dateStyle: "long"
});
let value: DateValue | undefined = undefined;
</script>
<Popover.Root openFocus>
<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())) : "Select a date"}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0">
<Calendar bind:value initialFocus />
</Popover.Content>
</Popover.Root>
Examples
Date Picker
Loading...
<script lang="ts">
import { Calendar as CalendarIcon } from "radix-icons-svelte";
import {
type DateValue,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { Calendar } from "$lib/components/ui/calendar";
import * as Popover from "$lib/components/ui/popover";
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-[240px] 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" align="start">
<Calendar bind:value />
</Popover.Content>
</Popover.Root>
<script lang="ts">
import { Calendar as CalendarIcon } from "lucide-svelte";
import {
type DateValue,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { Calendar } from "$lib/components/ui/calendar";
import * as Popover from "$lib/components/ui/popover";
const df = new DateFormatter("en-US", {
dateStyle: "long"
});
let value: DateValue | undefined = undefined;
</script>
<Popover.Root openFocus>
<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>
Date Range Picker
Loading...
<script lang="ts">
import { Calendar as CalendarIcon } from "radix-icons-svelte";
import type { DateRange } from "bits-ui";
import {
CalendarDate,
DateFormatter,
getLocalTimeZone,
type DateValue
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { RangeCalendar } from "$lib/components/ui/range-calendar";
import * as Popover from "$lib/components/ui/popover";
const df = new DateFormatter("en-US", {
dateStyle: "medium"
});
let value: DateRange | undefined = {
start: new CalendarDate(2022, 1, 20),
end: new CalendarDate(2022, 1, 20).add({ days: 20 })
};
</script>
<div class="grid gap-2">
<Popover.Root openFocus>
<Popover.Trigger asChild let:builder>
<Button
variant="outline"
class={cn(
"w-[300px] justify-start text-left font-normal",
!value && "text-muted-foreground"
)}
builders={[builder]}
>
<CalendarIcon class="mr-2 h-4 w-4" />
{#if value && value.start}
{#if value.end}
{df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
value.end.toDate(getLocalTimeZone())
)}
{:else}
{df.format(value.start.toDate(getLocalTimeZone()))}
{/if}
{:else}
Pick a date
{/if}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0" align="start">
<RangeCalendar
bind:value
placeholder={value?.start}
initialFocus
numberOfMonths={2}
/>
</Popover.Content>
</Popover.Root>
</div>
<script lang="ts">
import { Calendar as CalendarIcon } from "lucide-svelte";
import type { DateRange } from "bits-ui";
import {
CalendarDate,
DateFormatter,
getLocalTimeZone
} from "@internationalized/date";
import { cn } from "$lib/utils";
import { Button } from "$lib/components/ui/button";
import { RangeCalendar } from "$lib/components/ui/range-calendar";
import * as Popover from "$lib/components/ui/popover";
const df = new DateFormatter("en-US", {
dateStyle: "medium"
});
let value: DateRange | undefined = {
start: new CalendarDate(2022, 1, 20),
end: new CalendarDate(2022, 1, 20).add({ days: 20 })
};
</script>
<div class="grid gap-2">
<Popover.Root openFocus>
<Popover.Trigger asChild let:builder>
<Button
variant="outline"
class={cn(
"w-[300px] justify-start text-left font-normal",
!value && "text-muted-foreground"
)}
builders={[builder]}
>
<CalendarIcon class="mr-2 h-4 w-4" />
{#if value && value.start}
{#if value.end}
{df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
value.end.toDate(getLocalTimeZone())
)}
{:else}
{df.format(value.start.toDate(getLocalTimeZone()))}
{/if}
{:else}
Pick a date
{/if}
</Button>
</Popover.Trigger>
<Popover.Content class="w-auto p-0" align="start">
<RangeCalendar
bind:value
initialFocus
numberOfMonths={2}
placeholder={value?.start}
/>
</Popover.Content>
</Popover.Root>
</div>
On This Page