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>
 
<div class="absolute top-4">
  Start:{value?.start?.toString()}
  <br />
  End:{value?.end?.toString()}
</div>
 
<DateRangeField.Root
  bind:value
  class="flex w-full max-w-[320px] flex-col gap-1.5"
>
  <DateRangeField.Label class="block select-none text-sm font-medium"
    >Hotel dates</DateRangeField.Label
  >
  <div
    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"
  >
    {#each ["start", "end"] as const as type}
      <DateRangeField.Input {type}>
        {#snippet children({ segments })}
          {#each segments as { part, value }}
            <div class="inline-block select-none">
              {#if part === "literal"}
                <DateRangeField.Segment
                  {part}
                  class="p-1 text-muted-foreground"
                >
                  {value}
                </DateRangeField.Segment>
              {:else}
                <DateRangeField.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}
                </DateRangeField.Segment>
              {/if}
            </div>
          {/each}
        {/snippet}
      </DateRangeField.Input>
      {#if type === "start"}
        <div aria-hidden="true" class="px-1 text-muted-foreground">–⁠⁠⁠⁠⁠</div>
      {/if}
    {/each}
  </div>
</DateRangeField.Root>

Start:2024-01-01
End:2024-03-01

Hotel dates

2024

Structure

	<script lang="ts">
	import { DateField } from "$lib";
</script>
 
<DateRangeField.Root>
	<DateRangeField.Label>Check-in date</DateRangeField.Label>
	{#each ["start", "end"] as const as type}
		<DateRangeField.Input {type}>
			{#snippet children({ segments })}
				{#each segments as { part, value }}
					<DateRangeField.Segment {part}>
						{value}
					</DateRangeField.Segment>
				{/each}
			{/snippet}
		</DateRangeField.Input>
	{/each}
</DateRangeField.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.