Report an issue

Date Range Field

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

Hotel dates
1
/
1
/
2022
-
3
/
1
/
2022

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

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.