Date Picker

Enables users to select dates using an input field and calendar interface.

Epicenter

Local-first, open source apps

Birthday

yyyy

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
  import CaretLeft from "phosphor-svelte/lib/CaretLeft";
  import CaretRight from "phosphor-svelte/lib/CaretRight";
</script>
 
<DatePicker.Root weekdayFormat="short" fixedWeeks={true}>
  <div class="flex w-full max-w-[232px] flex-col gap-1.5">
    <DatePicker.Label class="block text-sm font-medium select-none"
      >Birthday</DatePicker.Label
    >
    <DatePicker.Input
      class="flex h-input w-full max-w-[232px] items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-foreground select-none focus-within:border-border-input-hover focus-within:shadow-date-field-focus hover:border-border-input-hover"
    >
      {#snippet children({ segments })}
        {#each segments as { part, value }, i (part + i)}
          <div class="inline-block select-none">
            {#if part === "literal"}
              <DatePicker.Segment {part} class="p-1 text-muted-foreground">
                {value}
              </DatePicker.Segment>
            {:else}
              <DatePicker.Segment
                {part}
                class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:ring-0! focus-visible:ring-offset-0! aria-[valuetext=Empty]:text-muted-foreground"
              >
                {value}
              </DatePicker.Segment>
            {/if}
          </div>
        {/each}
        <DatePicker.Trigger
          class="ml-auto inline-flex size-8 items-center justify-center rounded-[5px] text-foreground/60 transition-all hover:bg-muted active:bg-dark-10"
        >
          <CalendarBlank class="size-6" />
        </DatePicker.Trigger>
      {/snippet}
    </DatePicker.Input>
    <DatePicker.Content sideOffset={6} class="z-50">
      <DatePicker.Calendar
        class="rounded-[15px] border border-dark-10 bg-background-alt p-[22px] shadow-popover"
      >
        {#snippet children({ months, weekdays })}
          <DatePicker.Header class="flex items-center justify-between">
            <DatePicker.PrevButton
              class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-[0.98]"
            >
              <CaretLeft class="size-6" />
            </DatePicker.PrevButton>
            <DatePicker.Heading class="text-[15px] font-medium" />
            <DatePicker.NextButton
              class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-[0.98]"
            >
              <CaretRight class="size-6" />
            </DatePicker.NextButton>
          </DatePicker.Header>
          <div
            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-y-0 sm:space-x-4"
          >
            {#each months as month (month.value)}
              <DatePicker.Grid
                class="w-full border-collapse space-y-1 select-none"
              >
                <DatePicker.GridHead>
                  <DatePicker.GridRow class="mb-1 flex w-full justify-between">
                    {#each weekdays as day (day)}
                      <DatePicker.HeadCell
                        class="w-10 rounded-md text-xs font-normal! text-muted-foreground"
                      >
                        <div>{day.slice(0, 2)}</div>
                      </DatePicker.HeadCell>
                    {/each}
                  </DatePicker.GridRow>
                </DatePicker.GridHead>
                <DatePicker.GridBody>
                  {#each month.weeks as weekDates (weekDates)}
                    <DatePicker.GridRow class="flex w-full">
                      {#each weekDates as date (date)}
                        <DatePicker.Cell
                          {date}
                          month={month.value}
                          class="relative size-10 p-0! text-center text-sm"
                        >
                          <DatePicker.Day
                            class="group relative inline-flex size-10 items-center justify-center rounded-9px border border-transparent bg-transparent p-0 text-sm font-normal whitespace-nowrap text-foreground transition-all hover:border-foreground data-disabled:pointer-events-none data-disabled:text-foreground/30 data-outside-month:pointer-events-none data-selected:bg-foreground data-selected:font-medium data-selected:text-background data-unavailable:text-muted-foreground data-unavailable:line-through"
                          >
                            <div
                              class="absolute top-[5px] hidden size-1 rounded-full bg-foreground transition-all group-data-selected:bg-background group-data-today:block"
                            ></div>
                            {date.day}
                          </DatePicker.Day>
                        </DatePicker.Cell>
                      {/each}
                    </DatePicker.GridRow>
                  {/each}
                </DatePicker.GridBody>
              </DatePicker.Grid>
            {/each}
          </div>
        {/snippet}
      </DatePicker.Calendar>
    </DatePicker.Content>
  </div>
</DatePicker.Root>

	@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 
@import "tailwindcss";
@plugin "tailwindcss-animate";
 
@custom-variant dark (&:is(.dark *));
 
@font-face {
	font-family: "Cal Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/CalSans-SemiBold.woff2") format("woff2");
}
 
:root {
	/* Colors */
	--background: hsl(0 0% 100%);
	--background-alt: hsl(0 0% 100%);
	--foreground: hsl(0 0% 9%);
	--foreground-alt: hsl(0 0% 32%);
	--muted: hsl(240 5% 96%);
	--muted-foreground: hsla(0 0% 9% / 0.4);
	--border: hsl(240 6% 10%);
	--border-input: hsla(240 6% 10% / 0.17);
	--border-input-hover: hsla(240 6% 10% / 0.4);
	--border-card: hsla(240 6% 10% / 0.1);
	--dark: hsl(240 6% 10%);
	--dark-10: hsla(240 6% 10% / 0.1);
	--dark-40: hsla(240 6% 10% / 0.4);
	--dark-04: hsla(240 6% 10% / 0.04);
	--accent: hsl(204 94% 94%);
	--accent-foreground: hsl(204 80% 16%);
	--destructive: hsl(347 77% 50%);
	--tertiary: hsl(37.7 92.1% 50.2%);
	--line: hsl(0 0% 100%);
 
	/* black */
	--contrast: hsl(0 0% 0%);
 
	/* Shadows */
	--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
	--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
	--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
	--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
	--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
	--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.04);
	--shadow-date-field-focus: 0px 0px 0px 3px rgba(24, 24, 27, 0.17);
}
 
.dark {
	/* Colors */
	--background: hsl(0 0% 5%);
	--background-alt: hsl(0 0% 8%);
	--foreground: hsl(0 0% 95%);
	--foreground-alt: hsl(0 0% 70%);
	--muted: hsl(240 4% 16%);
	--muted-foreground: hsla(0 0% 100% / 0.4);
	--border: hsl(0 0% 96%);
	--border-input: hsla(0 0% 96% / 0.17);
	--border-input-hover: hsla(0 0% 96% / 0.4);
	--border-card: hsla(0 0% 96% / 0.1);
	--dark: hsl(0 0% 96%);
	--dark-40: hsl(0 0% 96% / 0.4);
	--dark-10: hsl(0 0% 96% / 0.1);
	--dark-04: hsl(0 0% 96% / 0.04);
	--accent: hsl(204 90% 90%);
	--accent-foreground: hsl(204 94% 94%);
	--destructive: hsl(350 89% 60%);
	--line: hsl(0 0% 9.02%);
	--tertiary: hsl(61.3 100% 82.2%);
	/* white */
	--contrast: hsl(0 0% 100%);
 
	/* Shadows */
	--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.3);
	--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.5) inset;
	--shadow-popover: 0px 7px 12px 3px hsla(0deg 0% 0% / 30%);
	--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
	--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.2);
	--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.4);
	--shadow-date-field-focus: 0px 0px 0px 3px rgba(244, 244, 245, 0.1);
}
 
@theme inline {
	--color-background: var(--background);
	--color-background-alt: var(--background-alt);
	--color-foreground: var(--foreground);
	--color-foreground-alt: var(--foreground-alt);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-border: var(--border-card);
	--color-border-input: var(--border-input);
	--color-border-input-hover: var(--border-input-hover);
	--color-border-card: var(--border-card);
	--color-dark: var(--dark);
	--color-dark-10: var(--dark-10);
	--color-dark-40: var(--dark-40);
	--color-dark-04: var(--dark-04);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-tertiary: var(--tertiary);
	--color-line: var(--line);
	--color-contrast: var(--contrast);
 
	--shadow-mini: var(--shadow-mini);
	--shadow-mini-inset: var(--shadow-mini-inset);
	--shadow-popover: var(--shadow-popover);
	--shadow-kbd: var(--shadow-kbd);
	--shadow-btn: var(--shadow-btn);
	--shadow-card: var(--shadow-card);
	--shadow-date-field-focus: var(--shadow-date-field-focus);
 
	--text-xxs: 10px;
 
	--radius-card: 16px;
	--radius-card-lg: 20px;
	--radius-card-sm: 10px;
	--radius-input: 9px;
	--radius-button: 5px;
	--radius-5px: 5px;
	--radius-9px: 9px;
	--radius-10px: 10px;
	--radius-15px: 15px;
 
	--spacing-input: 3rem;
	--spacing-input-sm: 2.5rem;
 
	--breakpoint-desktop: 1440px;
 
	--animate-accordion-down: accordion-down 0.2s ease-out;
	--animate-accordion-up: accordion-up 0.2s ease-out;
	--animate-caret-blink: caret-blink 1s ease-out infinite;
	--animate-scale-in: scale-in 0.2s ease;
	--animate-scale-out: scale-out 0.15s ease;
	--animate-fade-in: fade-in 0.2s ease;
	--animate-fade-out: fade-out 0.15s ease;
	--animate-enter-from-left: enter-from-left 0.2s ease;
	--animate-enter-from-right: enter-from-right 0.2s ease;
	--animate-exit-to-left: exit-to-left 0.2s ease;
	--animate-exit-to-right: exit-to-right 0.2s ease;
 
	--font-sans: "Inter", "sans-serif";
	--font-mono: "Source Code Pro", "monospace";
	--font-alt: "Courier", "sans-serif";
	--font-display: "Cal Sans", "sans-serif";
 
	@keyframes accordion-down {
		from {
			height: 0;
		}
		to {
			height: var(--bits-accordion-content-height);
		}
	}
 
	@keyframes accordion-up {
		from {
			height: var(--bits-accordion-content-height);
		}
		to {
			height: 0;
		}
	}
 
	@keyframes caret-blink {
		0%,
		70%,
		100% {
			opacity: 1;
		}
		20%,
		50% {
			opacity: 0;
		}
	}
 
	@keyframes enter-from-right {
		from {
			opacity: 0;
			transform: translateX(200px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
 
	@keyframes enter-from-left {
		from {
			opacity: 0;
			transform: translateX(-200px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
 
	@keyframes exit-to-right {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(200px);
		}
	}
 
	@keyframes exit-to-left {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(-200px);
		}
	}
 
	@keyframes scale-in {
		from {
			opacity: 0;
			transform: rotateX(-10deg) scale(0.9);
		}
		to {
			opacity: 1;
			transform: rotateX(0deg) scale(1);
		}
	}
 
	@keyframes scale-out {
		from {
			opacity: 1;
			transform: rotateX(0deg) scale(1);
		}
		to {
			opacity: 0;
			transform: rotateX(-10deg) scale(0.95);
		}
	}
 
	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
 
	@keyframes fade-out {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
}
 
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-border-card, currentColor);
	}
 
	* {
		@apply border-border;
	}
	html {
		-webkit-text-size-adjust: 100%;
		font-variation-settings: normal;
		scrollbar-color: var(--bg-muted);
	}
 
	body {
		@apply bg-background text-foreground;
		font-feature-settings:
			"rlig" 1,
			"calt" 1;
	}
 
	::selection {
		background: #fdffa4;
		color: black;
	}
}
 
@layer components {
	*:not(body):not(.focus-override) {
		outline: none !important;
		&:focus-visible {
			@apply focus-visible:ring-foreground focus-visible:ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1;
		}
	}
 
	.link {
		@apply hover:text-foreground/80 focus-visible:ring-foreground focus-visible:ring-offset-background rounded-xs focus-visible:outline-hidden inline-flex items-center gap-1 font-medium underline underline-offset-4 focus-visible:ring-2 focus-visible:ring-offset-2;
	}
}

Heads up!

Before diving into this component, it's important to understand how dates/times work in Bits UI. Please read the Dates documentation to learn more!

Structure

	<script lang="ts">
  import { DatePicker } from "bits-ui";
</script>
 
<DatePicker.Root>
  <DatePicker.Label />
  <DatePicker.Input>
    {#snippet children({ segments })}
      {#each segments as { part, value }}
        <DatePicker.Segment {part}>
          {value}
        </DatePicker.Segment>
      {/each}
      <DatePicker.Trigger />
    {/snippet}
  </DatePicker.Input>
  <DatePicker.Content>
    <DatePicker.Calendar>
      {#snippet children({ months, weekdays })}
        <DatePicker.Header>
          <DatePicker.PrevButton />
          <DatePicker.Heading />
          <DatePicker.NextButton />
        </DatePicker.Header>
        {#each months as month}
          <DatePicker.Grid>
            <DatePicker.GridHead>
              <DatePicker.GridRow>
                {#each weekdays as day}
                  <DatePicker.HeadCell>
                    {day}
                  </DatePicker.HeadCell>
                {/each}
              </DatePicker.GridRow>
            </DatePicker.GridHead>
            <DatePicker.GridBody>
              {#each month.weeks as weekDates}
                <DatePicker.GridRow>
                  {#each weekDates as date}
                    <DatePicker.Cell {date} month={month.value}>
                      <DatePicker.Day />
                    </DatePicker.Cell>
                  {/each}
                </DatePicker.GridRow>
              {/each}
            </DatePicker.GridBody>
          </DatePicker.Grid>
        {/each}
      {/snippet}
    </DatePicker.Calendar>
  </DatePicker.Content>
</DatePicker.Root>

Managing Placeholder State

This section covers how to manage the placeholder state of the component.

Two-Way Binding

Use bind:placeholder for simple, automatic state synchronization:

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  import { CalendarDateTime } from "@internationalized/date";
  let myPlaceholder = $state();
</script>
 
<button
  onclick={() => {
    myPlaceholder = new CalendarDateTime(2024, 8, 3, 12, 30);
  }}
>
  Set placeholder to August 3rd, 2024
</button>
 
<DatePicker.Root bind:placeholder={myPlaceholder}>
  <!-- ... -->
</DatePicker.Root>

Fully Controlled

Use a Function Binding for complete control over the state's reads and writes.

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  import type { DateValue } from "@internationalized/date";
  let myPlaceholder = $state<DateValue>();
 
  function getPlaceholder() {
    return myPlaceholder;
  }
 
  function setPlaceholder(newPlaceholder: DateValue) {
    myPlaceholder = newPlaceholder;
  }
</script>
 
<DatePicker.Root bind:placeholder={getPlaceholder, setPlaceholder}>
  <!-- ... -->
</DatePicker.Root>

Managing Value State

This section covers how to manage the value state of the component.

Two-Way Binding

Use bind:value for simple, automatic state synchronization:

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  import { CalendarDateTime } from "@internationalized/date";
  let myValue = $state(new CalendarDateTime(2024, 8, 3, 12, 30));
</script>
 
<button onclick={() => (myValue = myValue.add({ days: 1 }))}>
  Add 1 day
</button>
<DatePicker.Root bind:value={myValue}>
  <!-- ... -->
</DatePicker.Root>

Fully Controlled

Use a Function Binding for complete control over the state's reads and writes.

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  import type { DateValue } from "@internationalized/date";
  let myValue = $state<DateValue>();
 
  function getValue() {
    return myValue;
  }
 
  function setValue(newValue: DateValue) {
    myValue = newValue;
  }
</script>
 
<DatePicker.Root bind:value={getValue, setValue}>
  <!-- ... -->
</DatePicker.Root>

Managing Open State

This section covers how to manage the open state of the component.

Two-Way Binding

Use bind:open for simple, automatic state synchronization:

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  let isOpen = $state(false);
</script>
 
<button onclick={() => (isOpen = true)}>Open DatePicker</button>
 
<DatePicker.Root bind:open={isOpen}>
  <!-- ... -->
</DatePicker.Root>

Fully Controlled

Use a Function Binding for complete control over the state's reads and writes.

	<script lang="ts">
  import { DatePicker } from "bits-ui";
  let myOpen = $state(false);
 
  function getOpen() {
    return myOpen;
  }
 
  function setOpen(newOpen: boolean) {
    myOpen = newOpen;
  }
</script>
 
<DatePicker.Root bind:open={getOpen, setOpen}>
  <!-- ... -->
</DatePicker.Root>

Customization

The DatePicker component is made up of three other Bits UI components: Date Field, Calendar, and Popover.

You can check out the documentation for each of these components to learn more about their customization options, each of which can be used to customize the DatePicker component.

API Reference

DatePicker.Root

The root date picker component.

Property	Type	Description
`value`	`DateValue`	The selected date. `Default: —— undefined`
`onValueChange`	`function`	A function that is called when the selected date changes. `Default: —— undefined`
`open` $bindable	`boolean`	The open state of the popover content. `Default: false`
`onOpenChange`	`function`	A callback function called when the component changes the open state, such as from user interaction. It is not called when you set `open` yourself, so run any related logic where you set it. `Default: —— undefined`
`onOpenChangeComplete`	`function`	A callback function called after the open state changes and all animations have completed. `Default: —— undefined`
`placeholder`	`DateValue`	The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programmatically control the calendar's view. `Default: —— undefined`
`onPlaceholderChange`	`function`	A function that is called when the placeholder date changes. `Default: —— undefined`
`isDateUnavailable`	`function`	A function that returns whether or not a date is unavailable. `Default: —— undefined`
`isDateDisabled`	`function`	A function that returns whether or not a date is disabled. `Default: —— undefined`
`validate`	`function`	A function that returns whether or not a date is valid. `Default: —— undefined`
`onInvalid`	`function`	A callback fired when the value is invalid. `Default: —— undefined`
`required`	`boolean`	Whether or not the date field is required. `Default: false`
`errorMessageId`	`string`	The `id` of the element which contains the error messages for the date field when the date is invalid. `Default: —— undefined`
`readonlySegments`	`EditableSegmentPart[]`	An array of segments that should be readonly, which prevent user input on them. `Default: —— undefined`
`disableDaysOutsideMonth`	`boolean`	Whether or not to disable days outside the current month. `Default: false`
`closeOnDateSelect`	`boolean`	Whether or not to close the popover when a date is selected. `Default: true`
`pagedNavigation`	`boolean`	Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month. `Default: false`
`preventDeselect`	`boolean`	Whether or not to prevent the user from deselecting a date without selecting another date first. `Default: false`
`weekStartsOn`	`number`	An absolute day of the week to start the calendar on, regardless of locale. `0` is Sunday, `1` is Monday, etc. If not provided, the calendar will default to the locale's first day of the week. `Default: —— undefined`
`weekdayFormat`	`enum`	The format to use for the weekday strings provided via the `weekdays` slot prop. `Default: ''narrow''`
`calendarLabel`	`string`	The accessible label for the calendar. `Default: —— undefined`
`fixedWeeks`	`boolean`	Whether or not to always display 6 weeks in the calendar. `Default: false`
`maxValue`	`DateValue`	The maximum date that can be selected. `Default: —— undefined`
`minValue`	`DateValue`	The minimum date that can be selected. `Default: —— undefined`
`locale`	`string`	The locale to use for formatting dates. `Default: 'en'`
`numberOfMonths`	`number`	The number of months to display at once. `Default: 1`
`disabled`	`boolean`	Whether or not the Date Picker is disabled. `Default: false`
`readonly`	`boolean`	Whether or not the Date Picker is readonly. `Default: false`
`hourCycle`	`enum`	The hour cycle to use for formatting times. Defaults to the locale preference `Default: —— undefined`
`granularity`	`enum`	The granularity to use for formatting the field. Defaults to `'day'` if a `CalendarDate` is provided, otherwise defaults to `'minute'`. The field will render segments for each part of the date up to and including the specified granularity. `Default: —— undefined`
`hideTimeZone`	`boolean`	Whether or not to hide the time zone segment of the field. `Default: false`
`initialFocus`	`boolean`	If `true`, the calendar will focus the selected day, today, or the first day of the month in that order depending on what is visible when the calendar is mounted. `Default: false`
`monthFormat`	`union`	The format to use for the month strings provided via the `months` slot prop. `Default: 'long'`
`yearFormat`	`union`	The format to use for the year strings provided via the `years` slot prop. `Default: 'numeric'`
`children`	`Snippet`	The children content to render. `Default: —— undefined`

DatePicker.Label

The label for the date field.

Property	Type	Description
`ref` $bindable	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-invalid`	`''`	Present on the element when the field is invalid
`data-disabled`	`''`	Present on the element when the field is disabled
`data-date-field-label`	`''`	Present on the element.

DatePicker.Input

The field input component which contains the segments of the date field.

Property	Type	Description
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`
`name`	`string`	The name of the date field used for form submission. If provided, a hidden input element will be rendered alongside the date field. `Default: —— undefined`

Data Attribute	Value	Description
`data-invalid`	`''`	Present on the element when the field is invalid.
`data-disabled`	`''`	Present on the element when the field is disabled.
`data-date-field-input`	`''`	Present on the element.

DatePicker.Segment

A segment of the date field.

Property	Type	Description
`part` required	`SegmentPart`	The part of the date to render. `Default: —— undefined`
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-invalid`	`''`	Present on the element when the field is invalid
`data-disabled`	`''`	Present on the element when the field is disabled
`data-readonly`	`''`	Present on the element when the field or segment is readonly
`data-segment`	`enum`	The part of the date being rendered.
`data-date-field-segment`	`''`	Present on the element.

DatePicker.Trigger

A component which toggles the opening and closing of the popover on press.

Property	Type	Description
`openOnHover`	`boolean`	Whether the popover should open when the trigger is hovered. `Default: false`
`openDelay`	`number`	The delay in milliseconds before the popover opens after hovering the trigger. Only applies when `openOnHover` is `true`. `Default: 700`
`closeDelay`	`number`	The delay in milliseconds before the popover closes after the mouse leaves the trigger or content. Only applies when `openOnHover` is `true`. `Default: 300`
`ref` $bindable	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-state`	`enum`	Whether the popover is open or closed.
`data-popover-trigger`	`''`	Present on the trigger element.

DatePicker.Content

The contents of the popover which are displayed when the popover is open.

Property	Type	Description
`side`	`enum`	The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur. `Default: 'bottom'`
`sideOffset`	`number`	The distance in pixels from the anchor to the floating element. `Default: 0`
`align`	`enum`	The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur. `Default: 'center'`
`alignOffset`	`number`	The distance in pixels from the anchor to the floating element. `Default: 0`
`arrowPadding`	`number`	The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. `Default: 0`
`avoidCollisions`	`boolean`	When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. `Default: true`
`collisionBoundary`	`union`	A boundary element or array of elements to check for collisions against. `Default: —— undefined`
`collisionPadding`	`union`	The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. `Default: 0`
`sticky`	`enum`	The sticky behavior on the align axis. `'partial'` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `'always'` will keep the content in the boundary regardless. `Default: 'partial'`
`hideWhenDetached`	`boolean`	When `true`, hides the content when its anchor is fully clipped by a scroll container or the viewport. This is useful for when you want to hide the content when the user scrolls away. `Default: false`
`updatePositionStrategy`	`enum`	The strategy to use when updating the position of the content. When `'optimized'` the content will only be repositioned when the trigger is in the viewport. When `'always'` the content will be repositioned whenever the position changes. `Default: 'optimized'`
`strategy`	`enum`	The positioning strategy to use for the floating element. When `'fixed'` the element will be positioned relative to the viewport. When `'absolute'` the element will be positioned relative to the nearest positioned ancestor. `Default: 'fixed'`
`preventScroll`	`boolean`	When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal. `Default: false`
`customAnchor`	`union`	Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger. `Default: null`
`onInteractOutside`	`function`	Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction. `Default: —— undefined`
`onFocusOutside`	`function`	Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer. `Default: —— undefined`
`interactOutsideBehavior`	`enum`	The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction. `Default: 'close'`
`onEscapeKeydown`	`function`	Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event. `Default: —— undefined`
`escapeKeydownBehavior`	`enum`	The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction. `Default: 'close'`
`onOpenAutoFocus`	`function`	Event handler called when auto-focusing the content as it is opened. Can be prevented. `Default: —— undefined`
`onCloseAutoFocus`	`function`	Event handler called when auto-focusing the content as it is closed. Can be prevented. `Default: —— undefined`
`trapFocus`	`boolean`	Whether or not to trap the focus within the content when open. `Default: true`
`preventOverflowTextSelection`	`boolean`	When `true`, prevents the text selection from overflowing the bounds of the element. `Default: true`
`forceMount`	`boolean`	Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content. `Default: false`
`dir`	`enum`	The reading direction of the app. `Default: 'ltr'`
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet` - type ChildSnippetProps = { /** * Props for the positioning wrapper * Do not style this element - * styling should be applied to the content element / wrapperProps: Record<string, unknown>; /* * Props for your content element * Apply your custom styles here / props: Record<string, unknown>; /* * Content visibility state * Use this for conditional rendering with * Svelte transitions */ open: boolean; };	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-state`	`enum`	Whether the popover is open or closed.
`data-starting-style`	`''`	Present during the initial open frame. Use this to define the starting styles for CSS transitions.
`data-ending-style`	`''`	Present while closing before unmount. Use this to define the ending styles for CSS transitions.
`data-popover-content`	`''`	Present on the content element.

CSS Variable	Description	Details
`--bits-popover-content-transform-origin`	The transform origin of the content element.
`--bits-popover-content-available-width`	The available width of the content element.
`--bits-popover-content-available-height`	The available height of the content element.
`--bits-popover-anchor-width`	The width of the anchor element.
`--bits-popover-anchor-height`	The height of the anchor element.

DatePicker.Portal

When used, will render the popover content into the body or custom to element when open

Property	Type	Description
`to`	`union`	Where to render the content when it is open. Defaults to the body. `Default: document.body`
`disabled`	`boolean`	Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location. `Default: false`
`children`	`Snippet`	The children content to render. `Default: —— undefined`

DatePicker.Calendar

The calendar component containing the grids of dates.

Data Attribute	Value	Description
`data-invalid`	`''`	Present on the calendar element when the calendar is invalid.
`data-disabled`	`''`	Present on the calendar element when the calendar is disabled.
`data-readonly`	`''`	Present on the calendar element when the calendar is readonly.
`data-calendar-root`	`''`	Present on the calendar element.

The header of the calendar.

Property	Type	Description
`ref` $bindable	`HTMLElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the header element when the calendar is disabled.
`data-readonly`	`''`	Present on the header element when the calendar is readonly.
`data-calendar-header`	`''`	Present on the header element.

DatePicker.PrevButton

The previous button of the calendar.

Property	Type	Description
`ref` $bindable	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-disabled`	`''`	Present on the prev button element when the calendar or this button is disabled.
`data-calendar-prev-button`	`''`	Present on the prev button element.

DatePicker.Heading

The heading of the calendar.

Property	Type	Description
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the heading element when the calendar is disabled.
`data-readonly`	`''`	Present on the heading element when the calendar is readonly.
`data-calendar-heading`	`''`	Present on the heading element.

DatePicker.NextButton

The next button of the calendar.

Property	Type	Description
`ref` $bindable	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-disabled`	`''`	Present on the next button element when the calendar or this button is disabled.
`data-calendar-next-button`	`''`	Present on the next button element.

DatePicker.Grid

The grid of dates in the calendar, typically representing a month.

Property	Type	Description
`ref` $bindable	`HTMLTableElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the grid element when the calendar is disabled.
`data-readonly`	`''`	Present on the grid element when the calendar is readonly.
`data-calendar-grid`	`''`	Present on the grid element.

DatePicker.GridRow

A row in the grid of dates in the calendar.

Property	Type	Description
`ref` $bindable	`HTMLTableRowElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the grid row element when the calendar is disabled.
`data-readonly`	`''`	Present on the grid row element when the calendar is readonly.
`data-calendar-grid-row`	`''`	Present on the grid row element.

DatePicker.GridHead

The head of the grid of dates in the calendar.

Property	Type	Description
`ref` $bindable	`HTMLTableSectionElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the grid head element when the calendar is disabled.
`data-readonly`	`''`	Present on the grid head element when the calendar is readonly.
`data-calendar-grid-head`	`''`	Present on the grid head element.

DatePicker.HeadCell

A cell in the head of the grid of dates in the calendar.

Property	Type	Description
`ref` $bindable	`HTMLTableCellElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the head cell element when the calendar is disabled.
`data-readonly`	`''`	Present on the head cell element when the calendar is readonly.
`data-calendar-head-cell`	`''`	Present on the head cell element.

DatePicker.GridBody

The body of the grid of dates in the calendar.

Property	Type	Description
`ref` $bindable	`HTMLTableSectionElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present on the grid element when the calendar is disabled.
`data-readonly`	`''`	Present on the grid element when the calendar is readonly.
`data-calendar-grid-body`	`''`	Present on the grid body element.

DatePicker.Cell

A cell in the calendar grid.

Property	Type	Description
`date`	`DateValue`	The date for the cell. `Default: —— undefined`
`month`	`DateValue`	The current month the date is being displayed in. `Default: —— undefined`
`ref` $bindable	`HTMLTableCellElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present when the day is disabled.
`data-unavailable`	`''`	Present when the day is unavailable.
`data-today`	`''`	Present when the day is today.
`data-outside-month`	`''`	Present when the day is outside the current month.
`data-outside-visible-months`	`''`	Present when the day is outside the visible months.
`data-focused`	`''`	Present when the day is focused.
`data-selected`	`''`	Present when the day is selected.
`data-value`	`''`	The date in the format "YYYY-MM-DD".
`data-calendar-cell`	`''`	Present on the cell element.

DatePicker.Day

A day in the calendar grid.

Property	Type	Description
`ref` $bindable	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description
`data-disabled`	`''`	Present when the day is disabled.
`data-unavailable`	`''`	Present when the day is unavailable.
`data-today`	`''`	Present when the day is today.
`data-outside-month`	`''`	Present when the day is outside the current month.
`data-outside-visible-months`	`''`	Present when the day is outside the visible months.
`data-focused`	`''`	Present when the day is focused.
`data-selected`	`''`	Present when the day is selected.
`data-value`	`''`	The date in the format "YYYY-MM-DD".
`data-calendar-day`	`''`	Present on the day element.

DatePicker.MonthSelect

A select you can use to navigate to a specific month in the calendar view.

Property	Type	Description
`months`	`number[]`	The month values to render in the select. `Default: [1-12]`
`monthFormat`	`enum`	The format to use for the month strings provided via the `months` slot prop. If a function is provided, it will be called with the month number as an argument and should return a string. `Default: ''narrow''`
`ref` $bindable	`HTMLSelectElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-disabled`	`''`	Present on the month select element when the calendar is disabled.
`data-calendar-month-select`	`''`	Present on the month select element.

DatePicker.YearSelect

A select you can use to navigate to a specific year in the calendar view.

Property	Type	Description
`years`	`number[]`	The year values to render in the select. Default: The current year or placeholder year (whichever is higher) + 10 and minus 100 years. When a `minValue`/`maxValue` is provided to `Calendar.Root`, those will be used to constrain the range.
`yearFormat`	`enum`	The format to use for the year strings provided via the `years` slot prop. If a function is provided, it will be called with the year as an argument and should return a string. `Default: ''numeric''`
`ref` $bindable	`HTMLSelectElement`	The underlying DOM element being rendered. You can bind to this to get a reference to the element. `Default: null`
`children`	`Snippet`	The children content to render. `Default: —— undefined`
`child`	`Snippet`	Use render delegation to render your own element. See Child Snippet docs for more information. `Default: —— undefined`

Data Attribute	Value	Description	Details
`data-disabled`	`''`	Present on the year select element when the calendar is disabled.
`data-calendar-year-select`	`''`	Present on the year select element.

Previous Date Field Next Date Range Field

Date Picker Documentation

Epicenter

Heads up!

Structure

Managing Placeholder State

Two-Way Binding

Fully Controlled

Managing Value State

Two-Way Binding

Fully Controlled

Managing Open State

Two-Way Binding

Fully Controlled

Customization

API Reference

DatePicker.Root

DatePicker.Label

DatePicker.Input

DatePicker.Segment

DatePicker.Trigger

DatePicker.Content

DatePicker.Portal

DatePicker.Calendar

DatePicker.Header

DatePicker.PrevButton

DatePicker.Heading

DatePicker.NextButton

DatePicker.Grid

DatePicker.GridRow

DatePicker.GridHead

DatePicker.HeadCell

DatePicker.GridBody

DatePicker.Cell

DatePicker.Day

DatePicker.MonthSelect

DatePicker.YearSelect

Date Picker