Date Range Picker

The selected date range.

A function that is called when the selected date changes.

The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.

A function that is called when the placeholder date changes.

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.

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

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

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

The accessible label for the calendar.

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

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

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

The maximum date that can be selected.

The minimum date that can be selected.

The locale to use for formatting dates.

The number of months to display at once.

Whether or not the accordion is disabled.

Whether or not the calendar is readonly.

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

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.

Whether or not to hide the time zone segment of the field.

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.

The id of your description element, if any, which will be applied to the aria-describedby attribute of the appropriate elements.

Whether or not to disable the focus trap that is applied to the popover when it's open.

Whether or not to prevent scrolling the body while the popover is open.

Whether or not to close the popover when clicking outside of it.

Whether or not to close the popover when pressing the escape key.

The open state of the link popover component.

A callback that fires when the open state changes.

Override the focus when the popover is opened.

Override the focus when the popover is closed.

Where to render the popover when it is open. Defaults to the body. Can be disabled by passing null

The start value of the date range, which can exist prior to the true value being set, which is only set once a start and end value are selected. You can bind:startValue to a value to receive updates, but modifying this value outside the component will have no effect. To programmatically control the start value, use bind:value and update the start property of the DateRange object. This is provided as a convenience for use cases where you want to display the selected start value outside the component before the value is set.

A callback function called when a click occurs outside of the element. If event.preventDefault() is called, the default behavior of closing the element will be prevented.

The current months to display in the calendar. Used to render the calendar.

The days of the week to display in the calendar, typically used within the table header.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the root element when the calendar is invalid.

Present on the root element when the calendar is disabled.

Present on the root element when the calendar is readonly.

Present on the root element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the element when the field is invalid

Present on the element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

An object containing the start and end segment arrays used to render the start and end segments of the date field.

Present on the element when the field is invalid.

Present on the element when the field is disabled.

Present on the element.

The part of the date to render.

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

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the element when the field is invalid

Present on the element when the field is disabled

The type of segment the element represents.

Present on the element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

The open state of the link preview.

Present on the trigger element.

A Svelte transition function to use when transitioning the content in and out.

The configuration to apply to the transition.

A Svelte transition function to use when transitioning the content in and out.

The configuration to apply to the transition.

A Svelte transition function to use when transitioning the content in and out.

The configuration to apply to the transition.

The preferred side of the anchor to render against when open. Will be reversed when collisions occur. Floating UI reference.

The amount of offset to apply to the menu's position on the x-axis. Floating UI reference.

The preferred alignment of the anchor to render against when open. Floating UI reference.

An offset in pixels from the 'start' or 'end' alignment options. Floating UI reference.

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

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

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

Whether the floating element should be constrained to the viewport. Floating UI reference.

Whether the content should be the same width as the trigger. Floating UI reference.

The positioning strategy to use for the floating element. Floating UI reference.

Whether the floating element can overlap the reference element. Floating UI reference.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

The open state of the popover.

Present on the content element.

The current months to display in the calendar. Used to render the calendar.

The days of the week to display in the calendar, typically used within the table header.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the root element when the calendar is invalid.

Present on the root element when the calendar is disabled.

Present on the root element when the calendar is readonly.

Present on the root element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the header element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the prev button element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

The heading value.

Present on the heading element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the next button element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the grid element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the grid row element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the grid head element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the head cell element.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the grid body element.

The date for the cell.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Additional attributes to apply to the element if using the asChild prop with delegation.

Present on the element when the date is disabled.

Present on the cell element.

The date for the cell.

The current month the date is being displayed in.

Whether to use render delegation with this component or not.

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Whether or not the date is disabled.

Whether or not the date is unavailable.

Whether or not the date is selected.

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Present on the element when the date is disabled.

Present on the element when the date is selected.

Present on the element when the date is unavailable.

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

Present on the element when the date is today.

Present on the element when the date is outside the current month.

Present on the element when the date is outside the visible months.

Present on the element when the date is the start of the selection.

Present on the element when the date is the end of the selection.

Present on the element when the date is in the range as its still being selected.

Present on the element when the date is focused.

Present on the day element.