Date Picker

A component for selecting dates with calendar interface

Date Picker

Select a single date with a popover calendar.


Code Svelte
1
2<script lang="ts">
3	import { DatePicker } from "@kareyes/aether";
4	import type { DateValue } from "@internationalized/date";
5
6	let singleDate = $state<DateValue | undefined>();
7</script>
8
9<DatePicker bind:value={singleDate} />

Date Range Picker

Select a date range with two calendars side by side.


Code Svelte
1
2<script lang="ts">
3	import { DateRangePicker, DatePickerPrimitives } from "@kareyes/aether";
4
5	let dateRange = $state<DatePickerPrimitives.DateRange | undefined>();
6</script>
7
8<DateRangePicker bind:value={dateRange} />

Date Picker with Presets

Quick date selection with preset options.


Code Svelte
1
2<script lang="ts">
3	import { DatePickerWithPresets } from "@kareyes/aether";
4	import type { DateValue } from "@internationalized/date";
5
6	let presetDate = $state<DateValue | undefined>();
7</script>
8
9<DatePickerWithPresets bind:value={presetDate} />

Date Range Picker with Presets

Quick date range selection with common preset ranges.


Code Svelte
1
2<script lang="ts">
3	import { DateRangePickerWithPresets, DatePickerPrimitives } from "@kareyes/aether";
4
5	let presetRange = $state<DatePickerPrimitives.DateRange | undefined>();
6</script>
7
8<DateRangePickerWithPresets bind:value={presetRange} />

Error States

Date pickers with error styling.

Date is required

Please select a valid date


Code Svelte
1
2<script lang="ts">
3	import { DatePicker, DatePickerWithPresets } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-4 max-w-md">
7	<div>
8		<DatePicker
9			error={true}
10			onError={(err) => console.log('Error state:', err)}
11		/>
12		<p class="text-xs text-destructive mt-1">Date is required</p>
13	</div>
14	<div>
15		<DatePickerWithPresets error={true} />
16		<p class="text-xs text-destructive mt-1">Please select a valid date</p>
17	</div>
18</div>

Button Variants

Different button styles for the date picker trigger.


Code Svelte
1
2<script lang="ts">
3	import { DatePicker } from "@kareyes/aether";
4</script>
5
6<div class="grid gap-4 max-w-md">
7	<DatePicker buttonVariant="default" />
8	<DatePicker buttonVariant="outline" />
9	<DatePicker buttonVariant="ghost" />
10	<DatePicker buttonVariant="secondary" />
11</div>

Disabled State

Date picker in disabled state.


Code Svelte
1
2<script lang="ts">
3	import { DatePicker } from "@kareyes/aether";
4	import type { DateValue } from "@internationalized/date";
5
6	let disabledDate = $state<DateValue | undefined>();
7</script>
8
9<DatePicker bind:value={disabledDate} disabled />

Custom Format

Customize the date display format.


Code Svelte
1
2<script lang="ts">
3	import { DatePicker } from "@kareyes/aether";
4	import { getLocalTimeZone } from "@internationalized/date";
5</script>
6
7<DatePicker
8	format={(date) => {
9		if (!date) return "Select date";
10		return date.toDate(getLocalTimeZone()).toLocaleDateString("en-US", {
11			weekday: "long",
12			year: "numeric",
13			month: "long",
14			day: "numeric"
15		});
16	}}
17/>