Date Field

Enables users to input specific dates within a designated field.

	<script lang="ts">
  import { DateField } from "$lib";
</script>
 
<DateField.Root>
  <div class="flex min-w-[200px] flex-col gap-1">
    <DateField.Label class="block select-none">Check-in date</DateField.Label>
    <DateField.Input
      let:segments
      class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
    >
      {#each segments as { part, value }}
        <div class="inline-block select-none">
          <DateField.Segment
            {part}
            class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
          >
            {value}
          </DateField.Segment>
        </div>
      {/each}
    </DateField.Input>
  </div>
</DateField.Root>

	<script lang="ts">
  import { DateField } from "$lib";
</script>
 
<DateField.Root>
  <div class="flex min-w-[200px] flex-col gap-1">
    <DateField.Label class="block select-none">Check-in date</DateField.Label>
    <DateField.Input
      let:segments
      class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
    >
      {#each segments as { part, value }}
        <div class="inline-block select-none">
          <DateField.Segment
            {part}
            class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
          >
            {value}
          </DateField.Segment>
        </div>
      {/each}
    </DateField.Input>
  </div>
</DateField.Root>

Check-in date

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>

	<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>

Component API

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`

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.