Date Field

Enables users to input specific dates within a designated field.

	<script lang="ts">
  import { DateField } from "bits-ui";
</script>
 
<DateField.Root>
  <div class="flex w-full max-w-[232px] flex-col gap-1.5">
    <DateField.Label class="block select-none text-sm font-medium"
      >Birthday</DateField.Label
    >
    <DateField.Input
      let:segments
      class="flex h-input w-full max-w-[232px] 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"
    >
      {#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}
    </DateField.Input>
  </div>
</DateField.Root>

Birthday

yyyy

Structure

	<script lang="ts">
  import { DateField } from "$lib";
</script>
 
<DateField.Root>
  <DateField.Label>Check-in date</DateField.Label>
  <DateField.Input let:segments>
    {#each segments as { part, value }}
      <DateField.Segment {part}>
        {value}
      </DateField.Segment>
    {/each}
  </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.