Date Range Picker

Facilitates the selection of date ranges through an input and calendar-based interface.

Rental Days 
	<script lang="ts">
  import { type DateRange, DateRangePicker } from "bits-ui";
  import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
  import CaretLeft from "phosphor-svelte/lib/CaretLeft";
  import CaretRight from "phosphor-svelte/lib/CaretRight";
  import { cn } from "$lib/utils/index.js";
 
  let value: DateRange = $state({ start: undefined, end: undefined });
</script>
 
<DateRangePicker.Root
  bind:value
  weekdayFormat="short"
  fixedWeeks={true}
  class="flex w-full max-w-[340px] flex-col gap-1.5"
>
  <DateRangePicker.Label class="block select-none text-sm font-medium"
    >Rental Days</DateRangePicker.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}
      <DateRangePicker.Input {type}>
        {#snippet children({ segments })}
          {#each segments as { part, value }}
            <div class="inline-block select-none">
              {#if part === "literal"}
                <DateRangePicker.Segment
                  {part}
                  class="p-1 text-muted-foreground"
                >
                  {value}
                </DateRangePicker.Segment>
              {:else}
                <DateRangePicker.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}
                </DateRangePicker.Segment>
              {/if}
            </div>
          {/each}
        {/snippet}
      </DateRangePicker.Input>
      {#if type === "start"}
        <div aria-hidden="true" class="px-1 text-muted-foreground">–⁠⁠⁠⁠⁠</div>
      {/if}
    {/each}
 
    <DateRangePicker.Trigger
      class="ml-auto inline-flex size-8 items-center justify-center rounded-[5px] text-foreground/60 transition-all hover:bg-muted active:bg-dark-10"
    >
      <CalendarBlank class="size-6" />
    </DateRangePicker.Trigger>
  </div>
  <DateRangePicker.Content sideOffset={6} class="z-50">
    <DateRangePicker.Calendar
      class="mt-6 rounded-15px border border-dark-10 bg-background-alt p-[22px] shadow-popover"
    >
      {#snippet children({ months, weekdays })}
        <DateRangePicker.Header class="flex items-center justify-between">
          <DateRangePicker.PrevButton
            class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
          >
            <CaretLeft class="size-6" />
          </DateRangePicker.PrevButton>
          <DateRangePicker.Heading class="text-[15px] font-medium" />
          <DateRangePicker.NextButton
            class="inline-flex size-10 items-center justify-center rounded-9px bg-background-alt transition-all hover:bg-muted active:scale-98"
          >
            <CaretRight class="size-6" />
          </DateRangePicker.NextButton>
        </DateRangePicker.Header>
        <div
          class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
        >
          {#each months as month}
            <DateRangePicker.Grid
              class="w-full border-collapse select-none space-y-1"
            >
              <DateRangePicker.GridHead>
                <DateRangePicker.GridRow
                  class="mb-1 flex w-full justify-between"
                >
                  {#each weekdays as day}
                    <DateRangePicker.HeadCell
                      class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
                    >
                      <div>{day.slice(0, 2)}</div>
                    </DateRangePicker.HeadCell>
                  {/each}
                </DateRangePicker.GridRow>
              </DateRangePicker.GridHead>
              <DateRangePicker.GridBody>
                {#each month.weeks as weekDates}
                  <DateRangePicker.GridRow class="flex w-full">
                    {#each weekDates as date}
                      <DateRangePicker.Cell
                        {date}
                        month={month.value}
                        class="relative m-0 size-10 overflow-visible !p-0 text-center text-sm focus-within:relative focus-within:z-20"
                      >
                        <DateRangePicker.Day
                          class={cn(
                            "group relative inline-flex size-10 items-center justify-center overflow-visible whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all hover:border-foreground  focus-visible:!ring-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selection-start]:focus-visible:ring-2 data-[selection-start]:focus-visible:!ring-offset-2 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:border-foreground data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-0 data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:focus-visible:!ring-offset-0"
                          )}
                        >
                          <div
                            class="absolute top-[5px] hidden size-1 rounded-full bg-foreground transition-all group-data-[today]:block group-data-[selected]:bg-background"
                          ></div>
                          {date.day}
                        </DateRangePicker.Day>
                      </DateRangePicker.Cell>
                    {/each}
                  </DateRangePicker.GridRow>
                {/each}
              </DateRangePicker.GridBody>
            </DateRangePicker.Grid>
          {/each}
        </div>
      {/snippet}
    </DateRangePicker.Calendar>
  </DateRangePicker.Content>
</DateRangePicker.Root>

Structure

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
</script>
 
<DateRangePicker.Root>
	<DateRangePicker.Label />
	{#each ["start", "end"] as const as type}
		<DateRangePicker.Input {type}>
			{#snippet children({ segments })}
				{#each segments as { part, value }}
					<DateRangePicker.Segment {part}>
						{value}
					</DateRangePicker.Segment>
				{/each}
			{/snippet}
		</DateRangePicker.Input>
	{/each}
	<DateRangePicker.Trigger />
	<DateRangePicker.Content>
		<DateRangePicker.Calendar>
			{#snippet children({ months, weekdays })}
				<DateRangePicker.Header>
					<DateRangePicker.PrevButton />
					<DateRangePicker.Heading />
					<DateRangePicker.NextButton />
				</DateRangePicker.Header>
				{#each months as month}
					<DateRangePicker.Grid>
						<DateRangePicker.GridHead>
							<DateRangePicker.GridRow>
								{#each weekdays as day}
									<DateRangePicker.HeadCell>
										{day}
									</DateRangePicker.HeadCell>
								{/each}
							</DateRangePicker.GridRow>
						</DateRangePicker.GridHead>
						<DateRangePicker.GridBody>
							{#each month.weeks as weekDates}
								<DateRangePicker.GridRow>
									{#each weekDates as date}
										<DateRangePicker.Cell {date} month={month.value}>
											<DateRangePicker.Day>
												{date.day}
											</DateRangePicker.Day>
										</DateRangePicker.Cell>
									{/each}
								</DateRangePicker.GridRow>
							{/each}
						</DateRangePicker.GridBody>
					</DateRangePicker.Grid>
				{/each}
			{/snippet}
		</DateRangePicker.Calendar>
	</DateRangePicker.Content>
</DateRangePicker.Root>

Managing Placeholder State

Bits UI offers several approaches to manage and synchronize the component's placeholder state, catering to different levels of control and integration needs.

1. Two-Way Binding

For seamless state synchronization, use Svelte's bind:placeholder directive. This method automatically keeps your local state in sync with the component's internal state.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	import { CalendarDateTime } from "@internationalized/date";
	let myPlaceholder = $state(new CalendarDateTime(2024, 8, 3, 12, 30));
</script>
 
<DateRangePicker.Root bind:placeholder={myPlaceholder}>
	<!-- ... -->
</DateRangePicker.Root>

Key Benefits

  • Simplifies state management
  • Automatically updates myPlaceholder when the internal state changes
  • Allows external control (e.g., changing the placeholder via a separate button/programmatically)

2. Change Handler

For more granular control or to perform additional logic on state changes, use the onPlaceholderChange prop. This approach is useful when you need to execute custom logic alongside state updates.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	let myPlaceholder = $state(new CalendarDateTime(2024, 8, 3, 12, 30));
</script>
 
<DateRangePicker.Root
	placeholder={myPlaceholder}
	onPlaceholderChange={(p) => {
		myPlaceholder = p.set({ year: 2025 });
	}}
>
	<!-- ... -->
</DateRangePicker.Root>

Use Cases

  • Implementing custom behaviors on placeholder change
  • Integrating with external state management solutions
  • Triggering side effects (e.g., logging, data fetching)

3. Fully Controlled

For complete control over the component's placeholder state, use the controlledPlaceholder prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events.

To implement controlled state:

  1. Set the controlledPlaceholder prop to true on the DateRangePicker.Root component.
  2. Provide a placeholder prop to DateRangePicker.Root, which should be a variable holding the current state.
  3. Implement an onPlaceholderChange handler to update the state when the internal state changes.
	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	let myPlaceholder = $state();
</script>
 
<DateRangePicker.Root
	controlledPlaceholder
	placeholder={myPlaceholder}
	onPlaceholderChange={(p) => (myPlaceholder = p)}
>
	<!-- ... -->
</DateRangePicker.Root>

When to Use

  • Implementing complex logic
  • Coordinating multiple UI elements
  • Debugging state-related issues

Managing Value State

Bits UI offers several approaches to manage and synchronize the component's value state, catering to different levels of control and integration needs.

1. Two-Way Binding

For seamless state synchronization, use Svelte's bind:value directive. This method automatically keeps your local state in sync with the component's internal state.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	import { CalendarDateTime } from "@internationalized/date";
	let myValue = $state({
		start: new CalendarDateTime(2024, 8, 3, 12, 30),
		end: new CalendarDateTime(2024, 8, 4, 12, 30),
	});
</script>
 
<button
	onclick={() => {
		value = {
			start: value.start.add({ days: 1 }),
			end: value.end.add({ days: 1 }),
		};
	}}
>
	Add 1 day
</button>
<DateRangePicker.Root bind:value={myValue}>
	<!-- ... -->
</DateRangePicker.Root>

Key Benefits

  • Simplifies state management
  • Automatically updates myValue when the internal state changes
  • Allows external control (e.g., changing the value via a separate button/programmatically)

2. Change Handler

For more granular control or to perform additional logic on state changes, use the onValueChange prop. This approach is useful when you need to execute custom logic alongside state updates.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	import { CalendarDateTime } from "@internationalized/date";
	let myValue = $state({
		start: new CalendarDateTime(2024, 8, 3, 12, 30),
		end: new CalendarDateTime(2024, 8, 4, 12, 30),
	});
</script>
 
<DateRangePicker.Root
	value={myValue}
	onValueChange={(v) => {
		value = {
			start: v.start?.set({ hour: v.start.hour + 1 }),
			end: v.end?.set({ hour: v.end.hour + 1 }),
		};
	}}
>
	<!-- ... -->
</DateRangePicker.Root>

Use Cases

  • Implementing custom behaviors on value change
  • Integrating with external state management solutions
  • Triggering side effects (e.g., logging, data fetching)

3. Fully Controlled

For complete control over the component's value state, use the controlledValue prop. This approach requires you to manually manage the state, giving you full control over when and how the component responds to change events.

To implement controlled state:

  1. Set the controlledValue prop to true on the DateRangePicker.Root component.
  2. Provide a value prop to DateRangePicker.Root, which should be a variable holding the current state.
  3. Implement an onValueChange handler to update the state when the internal state changes.
	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	let myValue = $state();
</script>
 
<DateRangePicker.Root controlledValue value={myValue} onValueChange={(v) => (myValue = v)}>
	<!-- ... -->
</DateRangePicker.Root>

When to Use

  • Implementing complex logic
  • Coordinating multiple UI elements
  • Debugging state-related issues

Managing Open State

Bits UI offers several approaches to manage and synchronize the component's open state, catering to different levels of control and integration needs.

1. Two-Way Binding

For seamless state synchronization, use Svelte's bind:open directive. This method automatically keeps your local state in sync with the component's internal state.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	let isOpen = $state(false);
</script>
 
<button onclick={() => (isOpen = true)}>Open DateRangePicker</button>
 
<DateRangePicker.Root bind:open={isOpen}>
	<!-- ... -->
</DateRangePicker.Root>

Key Benefits

  • Simplifies state management
  • Automatically updates isOpen when the picker closes (e.g., via escape key)
  • Allows external control (e.g., opening via a separate button)

2. Change Handler

For more granular control or to perform additional logic on state changes, use the onOpenChange prop. This approach is useful when you need to execute custom logic alongside state updates.

	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
	let isOpen = $state(false);
</script>
 
<DateRangePicker.Root
	open={isOpen}
	onOpenChange={(open) => {
		isOpen = open;
		// additional logic here.
	}}
>
	<!-- ... -->
</DateRangePicker.Root>

Use Cases

  • Implementing custom behaviors on open/close
  • Integrating with external state management solutions
  • Triggering side effects (e.g., logging, data fetching)

3. Fully Controlled

For complete control over the component's open state, use the controlledOpen prop. This approach requires you to manually manage the open state, giving you full control over when and how the dialog responds to open/close events.

To implement controlled state:

  1. Set the controlledOpen prop to true on the DateRangePicker.Root component.
  2. Provide an open prop to DateRangePicker.Root, which should be a variable holding the current state.
  3. Implement an onOpenChange handler to update the state when the internal state changes.
	<script lang="ts">
	import { DateRangePicker } from "bits-ui";
 
	let myOpen = $state(false);
</script>
 
<DateRangePicker.Root controlledOpen open={myOpen} onOpenChange={(o) => (myOpen = o)}>
	<!-- ... -->
</DateRangePicker.Root>

When to Use

  • Implementing complex open/close logic
  • Coordinating multiple UI elements
  • Debugging state-related issues

Customization

The DateRangePicker component is made up of three other Bits UI components: Date Range Field, Range Calendar, and Popover.

You can check out the documentation for each of these components to learn more about their customization options, each of which can be used to customize the DateRangePicker component.

API Reference

DateRangePicker.Root

The root date picker component.

Property Type Description
value $bindable
DateRange

The selected date range.

Default: undefined
onValueChange
function

A function that is called when the selected date changes.

Default: undefined
controlledValue
boolean

Whether or not the value is controlled or not. If true, the component will not update the value state internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component. See Controlled State for more information.

Default: false
placeholder $bindable
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
controlledPlaceholder
boolean

Whether or not the placeholder is controlled or not. If true, the component will not update the placeholder state internally, instead it will call onPlaceholderChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

Default: false
readonlySegments
EditableSegmentPart[]

An array of segments that should be readonly, which prevent user input on them.

Default: undefined
isDateUnavailable
function

A function that returns whether or not a date is unavailable.

Default: undefined
minValue
DateValue

The minimum valid date that can be entered.

Default: undefined
maxValue
DateValue

The maximum valid date that can be entered.

Default: undefined
validate
function

A function that returns whether or not a date is unavailable.

Default: undefined
onInvalid
function

A callback fired when the date field's value is invalid.

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

The id of the element which contains the error messages for the date field when the date is invalid.

Default: undefined
hourCycle
enum

The hour cycle to use for formatting times. Defaults to the locale preference

Default: undefined
locale
string

The locale to use for formatting dates.

Default: 'en-US'
disabled
boolean

Whether or not the accordion is disabled.

Default: false
readonly
boolean

Whether or not the field is readonly.

Default: false
required
boolean

Whether or not the date field is required.

Default: false
closeOnRangeSelect
boolean

Whether or not to close the popover when a date range is selected.

Default: true
disableDaysOutsideMonth
boolean

Whether or not to disable days outside the current month.

Default: false
pagedNavigation
boolean

Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.

Default: false
preventDeselect
boolean

Whether or not to prevent the user from deselecting a date without selecting another date first.

Default: false
weekdayFormat
enum

The format to use for the weekday strings provided via the weekdays slot prop.

Default: 'narrow'
weekStartsOn
number

The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.

Default: 0
calendarLabel
string

The accessible label for the calendar.

Default: undefined
fixedWeeks
boolean

Whether or not to always display 6 weeks in the calendar.

Default: false
isDateDisabled
function

A function that returns whether or not a date is disabled.

Default: undefined
numberOfMonths
number

The number of months to display at once.

Default: 1
open $bindable
boolean

The open state of the popover content.

Default: false
onOpenChange
function

A callback that fires when the open state changes.

Default: undefined
controlledOpen
boolean

Whether or not the open state is controlled or not. If true, the component will not update the open state internally, instead it will call onOpenChange when it would have otherwise, and it is up to you to update the open prop that is passed to the component.

Default: false
onEndValueChange
function

A function that is called when the end date changes.

Default: undefined
onStartValueChange
function

A function that is called when the start date changes.

Default: undefined
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-invalid
''

Present on the root element when the calendar is invalid.

data-disabled
''

Present on the root element when the calendar is disabled.

data-readonly
''

Present on the root element when the calendar is readonly.

data-calendar-root
''

Present on the root element.

DateRangePicker.Label

The label for the date field.

Property Type Description
ref $bindable
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-invalid
''

Present on the element when the field is invalid

data-date-field-label
''

Present on the element.

DateRangePicker.Input

The field input component which contains the segments of the date field.

Property Type Description
name
string

The name of the input field used for form submission. If provided a hidden input will be rendered alongside the field.

Default: undefined
type required
enum

The type of field to render (start or end).

Default: undefined
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
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.

DateRangePicker.Segment

A segment of the date field.

Property Type Description
part required
SegmentPart

The part of the date to render.

Default: undefined
ref $bindable
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
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.

DateRangePicker.Trigger

A component which toggles the opening and closing of the popover on press.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

Whether the popover is open or closed.

data-popover-trigger
''

Present on the trigger element.

DateRangePicker.Content

The contents of the popover which are displayed when the popover is open.

Property Type Description
side
enum

The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.

Default: bottom
sideOffset
number

The distance in pixels from the anchor to the floating element.

Default: 0
align
enum

The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.

Default: start
alignOffset
number

The distance in pixels from the anchor to the floating element.

Default: 0
arrowPadding
number

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
avoidCollisions
boolean

When true, overrides the side and align options to prevent collisions with the boundary edges.

Default: true
collisionBoundary
union

A boundary element or array of elements to check for collisions against.

Default: undefined
collisionPadding
union

The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.

Default: 0
sticky
enum

The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless.

Default: partial
hideWhenDetached
boolean

When true, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.

Default: true
updatePositionStrategy
enum

The strategy to use when updating the position of the content. When 'optimized' the content will only be repositioned when the trigger is in the viewport. When 'always' the content will be repositioned whenever the position changes.

Default: optimized
strategy
enum

The positioning strategy to use for the floating element. When 'fixed' the element will be positioned relative to the viewport. When 'absolute' the element will be positioned relative to the nearest positioned ancestor.

Default: fixed
preventScroll
boolean

When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.

Default: false
customAnchor
union

Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.

Default: null
onInteractOutside
function

Callback fired when an outside interaction event occurs, which is a pointerdown event. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Default: undefined
onFocusOutside
function

Callback fired when focus leaves the dismissible layer. You can call event.preventDefault() to prevent the default behavior on focus leaving the layer.

Default: undefined
interactOutsideBehavior
enum

The behavior to use when an interaction occurs outside of the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onEscapeKeydown
function

Callback fired when an escape keydown event occurs in the floating content. You can call event.preventDefault() to prevent the default behavior of handling the escape keydown event.

Default: undefined
escapeKeydownBehavior
enum

The behavior to use when an escape keydown event occurs in the floating content. 'close' will close the content immediately. 'ignore' will prevent the content from closing. 'defer-otherwise-close' will defer to the parent element if it exists, otherwise it will close the content. 'defer-otherwise-ignore' will defer to the parent element if it exists, otherwise it will ignore the interaction.

Default: close
onOpenAutoFocus
function

Event handler called when auto-focusing the content as it is opened. Can be prevented.

Default: undefined
onCloseAutoFocus
function

Event handler called when auto-focusing the content as it is closed. Can be prevented.

Default: undefined
trapFocus
boolean

Whether or not to trap the focus within the content when open.

Default: true
preventOverflowTextSelection
boolean

When true, prevents the text selection from overflowing the bounds of the element.

Default: true
forceMount
boolean

Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.

Default: false
dir
enum

The reading direction of the app.

Default: ltr
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-state
enum

Whether the popover is open or closed.

data-popover-content
''

Present on the content element.

DateRangePicker.Calendar

The calendar component containing the grids of dates.

Data Attribute Value Description
data-invalid
''

Present on the root element when the calendar is invalid.

data-disabled
''

Present on the root element when the calendar is disabled.

data-readonly
''

Present on the root element when the calendar is readonly.

data-calendar-root
''

Present on the root element.

DateRangePicker.Header

The header of the calendar.

Property Type Description
ref $bindable
HTMLElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the header element when the calendar is disabled.

data-readonly
''

Present on the header element when the calendar is readonly.

data-calendar-header
''

Present on the header element.

DateRangePicker.PrevButton

The previous button of the calendar.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the prev button element when the calendar or this button is disabled.

data-calendar-prev-button
''

Present on the prev button element.

DateRangePicker.Heading

The heading of the calendar.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the heading element when the calendar is disabled.

data-readonly
''

Present on the heading element when the calendar is readonly.

data-calendar-heading
''

Present on the heading element.

DateRangePicker.NextButton

The next button of the calendar.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the next button element when the calendar or this button is disabled.

data-calendar-next-button
''

Present on the next button element.

DateRangePicker.Grid

The grid of dates in the calendar, typically representing a month.

Property Type Description
ref $bindable
HTMLTableElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the grid element when the calendar is disabled.

data-readonly
''

Present on the grid element when the calendar is readonly.

data-calendar-grid
''

Present on the grid element.

DateRangePicker.GridRow

A row in the grid of dates in the calendar.

Property Type Description
ref $bindable
HTMLTableRowElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the grid row element when the calendar is disabled.

data-readonly
''

Present on the grid row element when the calendar is readonly.

data-calendar-grid-row
''

Present on the grid row element.

DateRangePicker.GridHead

The head of the grid of dates in the calendar.

Property Type Description
ref $bindable
HTMLTableSectionElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the grid head element when the calendar is disabled.

data-readonly
''

Present on the grid head element when the calendar is readonly.

data-calendar-grid-head
''

Present on the grid head element.

DateRangePicker.HeadCell

A cell in the head of the grid of dates in the calendar.

Property Type Description
ref $bindable
HTMLTableCellElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the head cell element when the calendar is disabled.

data-readonly
''

Present on the head cell element when the calendar is readonly.

data-calendar-head-cell
''

Present on the head cell element.

DateRangePicker.GridBody

The body of the grid of dates in the calendar.

Property Type Description
ref $bindable
HTMLTableSectionElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present on the grid element when the calendar is disabled.

data-readonly
''

Present on the grid element when the calendar is readonly.

data-calendar-grid-body
''

Present on the grid body element.

DateRangePicker.Cell

A cell in the calendar grid.

Property Type Description
date
DateValue

The date for the cell.

Default: undefined
month
DateValue

The current month the date is being displayed in.

Default: undefined
ref $bindable
HTMLTableCellElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present when the day is disabled.

data-unavailable
''

Present when the day is unavailable.

data-today
''

Present when the day is today.

data-outside-month
''

Present when the day is outside the current month.

data-outside-visible-months
''

Present when the day is outside the visible months.

data-focused
''

Present when the day is focused.

data-selected
''

Present when the day is selected.

data-value
''

The date in the format "YYYY-MM-DD".

data-calendar-cell
''

Present on the cell element.

DateRangePicker.Day

A day in the calendar grid.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-disabled
''

Present when the day is disabled.

data-unavailable
''

Present when the day is unavailable.

data-today
''

Present when the day is today.

data-outside-month
''

Present when the day is outside the current month.

data-outside-visible-months
''

Present when the day is outside the visible months.

data-focused
''

Present when the day is focused.

data-selected
''

Present when the day is selected.

data-value
''

The date in the format "YYYY-MM-DD".

data-calendar-day
''

Present on the day element.