Date Range Field

Allows users to input a range of dates within a designated field.

	<script lang="ts">
  import { DateRangeField } from "bits-ui";
  import { CalendarDate } from "@internationalized/date";
 
  let value = {
    start: new CalendarDate(2024, 1, 1),
    end: new CalendarDate(2024, 3, 1)
  };
</script>
 
<DateRangeField.Root bind:value>
  <div class="flex w-full max-w-[280px] flex-col gap-1.5">
    <DateRangeField.Label class="block select-none text-sm font-medium"
      >Hotel dates</DateRangeField.Label
    >
    <DateRangeField.Input
      let:segments
      class="flex h-input w-full max-w-[280px] 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.start as { part, value }}
        <div class="inline-block select-none">
          {#if part === "literal"}
            <DateRangeField.Segment
              type="start"
              {part}
              class="p-1 text-muted-foreground"
            >
              {value}
            </DateRangeField.Segment>
          {:else}
            <DateRangeField.Segment
              type="start"
              {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}
            </DateRangeField.Segment>
          {/if}
        </div>
      {/each}
      <div aria-hidden class="px-1 text-muted-foreground">–⁠⁠⁠⁠⁠</div>
      {#each segments.end as { part, value }}
        <div class="inline-block select-none">
          {#if part === "literal"}
            <DateRangeField.Segment
              type="end"
              {part}
              class="p-1 text-muted-foreground "
            >
              {value}
            </DateRangeField.Segment>
          {:else}
            <DateRangeField.Segment
              type="end"
              {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}
            </DateRangeField.Segment>
          {/if}
        </div>
      {/each}
    </DateRangeField.Input>
  </div>
</DateRangeField.Root>

Hotel dates

2024

–⁠⁠⁠⁠⁠

2024

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

DateRangeField.Root

The root date field component.

Property	Type	Description
`value`	`DateRange`	The selected date range. `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`	`object`	The segments for the start and end fields that should be readonly, meaning users cannot edit them. This is useful for prepopulating fixed segments like years, months, or days. `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.

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

DateRangeField.Segment

A segment of the date field.

Property	Type	Description
`part` * Required	`SegmentPart`	The part of the date to render. `Default: —— undefined`
`type` * Required	`enum`	The type of field to render (start or end). `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.

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