Date Field

Enables users to input specific dates within a designated field.

	<script lang="ts">
  import { CalendarDateTime, type DateValue } from "@internationalized/date";
  import { DateField } from "bits-ui";
 
  const v = new CalendarDateTime(2023, 10, 12, 12, 30, 0, 0);
 
  let value = $state<DateValue>(v);
</script>
 
<div class="absolute top-4">
  {value?.toString()}
</div>
 
<DateField.Root bind:value granularity="second">
  <div class="flex w-full flex-col gap-1.5">
    <DateField.Label class="block select-none text-sm font-medium"
      >Birthday</DateField.Label
    >
    <DateField.Input
      class="flex h-input w-full select-none items-center rounded-input border border-border-input bg-background px-2 py-3 text-sm tracking-[0.01em] text-foreground 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 }}
          <div class="inline-block select-none">
            {#if part === "literal"}
              <DateField.Segment {part} class="p-1 text-muted-foreground">
                {value}
              </DateField.Segment>
            {:else}
              <DateField.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}
              </DateField.Segment>
            {/if}
          </div>
        {/each}
      {/snippet}
    </DateField.Input>
  </div>
</DateField.Root>

2023-10-12T12:30:00

Birthday

2023

add docs about leap years/birthdays and placeholder date

Structure

	<script lang="ts">
	import { DateField } from "$lib";
</script>
 
<DateField.Root>
	<DateField.Label>Check-in date</DateField.Label>
	<DateField.Input>
		{#snippet children({ segments })}
			{#each segments as { part, value }}
				<DateField.Segment {part}>
					{value}
				</DateField.Segment>
			{/each}
		{/snippet}
	</DateField.Input>
</DateField.Root>

API Reference

DateField.Root

The root date field 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`
`placeholder`	`DateValue`	The placeholder date, which is used to determine what date to start the segments from when no value exists. `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`
`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`
`validationId`	`string`	The id of your validation message element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements when a validation error occurs. `Default: —— undefined`
`descriptionId`	`string`	The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements. `Default: —— undefined`
`maxValue`	`DateValue`	The maximum valid date that can be entered. `Default: —— undefined`
`minValue`	`DateValue`	The minimum valid date that can be entered. `Default: —— undefined`
`locale`	`string`	The locale to use for formatting dates. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the accordion is disabled. `Default: false`
`readonly`	`boolean`	Whether or not the field is readonly. `Default: false`
`readonlySegments`	`array`	An array of segments that should be readonly, which prevent user input on them. `Default: —— undefined`

Slot Property	Type	Description
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).
`isInvalid`	`boolean`	Whether or not the field is invalid.

DateField.Input

The container for the segments of the date field.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`segments`	`array`	An array of objects used to render the segments of the date field.

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.

DateField.Segment

A segment of the date field.

Property	Type	Description
`part` * Required	`SegmentPart`	The part of the date to render. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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-segment`	`enum`	The type of segment the element represents.
`data-date-field-segment`	`——`	Present on the element.

DateField.Label

The label for the date field.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

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