Date Picker

The selected date(s). If type is 'single', this will be a DateValue. If type is 'multiple', this will be an array of DateValues.

A function that is called when the selected date changes.

The open state of the popover content.

A callback that fires when the open state changes.

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

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

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

Whether or not the date field is required.

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

Whether or not to disable days outside the current month.

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

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.

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 field 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 children content to render.

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.

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

The children content to render.

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

Present on the element when the field is invalid

Present on the element.

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

The children content to render.

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

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 underlying DOM element being rendered. You can bind to this to get a reference to the element.

The children content to render.

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

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.

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

The children content to render.

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

The open state of the link preview.

Present on the trigger element.

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

Callback fired when an outside interaction event completes, which is either a pointerup, mouseup, or touchend event, depending on the user's input device. You can call event.preventDefault() to prevent the default behavior of handling the outside interaction.

Callback fired when an outside interaction event starts, which is either a pointerdown, mousedown, or touchstart event, depending on the user's input device. You can call event.preventDefault() to prevent the continuation of the outside interaction.

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

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.

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.

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.

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

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

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

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.

The reading direction of the app.

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

The children content to render.

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

The open state of the popover.

Present on the content element.

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.

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

The children content to render.

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

Present on the header element.

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

The children content to render.

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

Present on the prev button element.

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

The children content to render.

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

Present on the heading element.

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

The children content to render.

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

Present on the next button element.

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

The children content to render.

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

Present on the grid element.

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

The children content to render.

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

Present on the grid row element.

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

The children content to render.

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

Present on the grid head element.

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

The children content to render.

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

Present on the head cell element.

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

The children content to render.

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

Present on the grid body element.

The date for the cell.

The current month the date is being displayed in.

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

The children content to render.

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

Present on the element when the date is disabled.

Present on the cell element.

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

The children content to render.

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

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

Present on the day element.