{"slug":"date-picker","title":"Date Picker","description":"Using the date-picker machine in your project.","contentType":"component","framework":"react","content":"A datepicker allows users to enter a date either through text input, or by\nchoosing a date from the calendar.\n\n> **Good to know**: The date picker machine is built on top of the\n> [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html)\n> library.\n\n## Resources\n\n\n[Latest version: v1.31.0](https://www.npmjs.com/package/@zag-js/date-picker)\n[Logic Visualizer](https://zag-visualizer.vercel.app/date-picker)\n[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/date-picker)\n\n\n\n**Features**\n\n- Displays a calendar view for date selection\n- Support for date range selection\n- Support for disabling specific dates\n- Localization support\n- Provides keyboard accessibility for navigating the calendar.\n\n## Installation\n\nTo use the date-picker machine in your project, run the following command in\nyour command line:\n\n```bash\nnpm install @zag-js/date-picker @zag-js/react\n# or\nyarn add @zag-js/date-picker @zag-js/react\n```\n\n## Anatomy\n\nTo set up the date-picker correctly, you'll need to understand its anatomy and\nhow we name its parts.\n\n> Each part includes a `data-part` attribute to help identify them in the DOM.\n\n\n\n## Usage\n\nFirst, import the date picker package into your project\n\n```tsx\nimport * as datepicker from \"@zag-js/date-picker\"\n```\n\nThe date picker package exports these key functions:\n\n- `machine` — The state machine logic for the date-picker widget.\n- `connect` — The function that translates the machine's state to JSX attributes\n and event handlers.\n- `parse` - The function that parses the date string into a date object.\n Requires passing the\n [ISO 8601 date format](https://www.iso.org/iso-8601-date-and-time-format.html)\n as the first argument.\n\n> You'll also need to provide a unique `id` to the `useMachine` hook. This is\n> used to ensure that every part has a unique identifier.\n\nNext, import the required hooks and functions for your framework and use the\ndate-picker machine in your project 🔥\n\n```jsx\nimport * as datepicker from \"@zag-js/date-picker\"\nimport { useMachine, normalizeProps, Portal } from \"@zag-js/react\"\nimport { useId } from \"react\"\n\nfunction DatePicker() {\n const service = useMachine(datepicker.machine, { id: useId() })\n\n const api = datepicker.connect(service, normalizeProps)\n\n return (\n <>\n
\n \n \n )\n}\n```\n\n### Setting the initial date\n\nTo set the initial value that is rendered by the date picker, set the `value`\nproperty in the machine context.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n defaultValue: [datepicker.parse(\"2022-01-01\")],\n})\n```\n\n### Controlling the selected date\n\nUse the `value` and `onValueChange` properties to programmatically control the\nselected date.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n value: [datepicker.parse(\"2022-01-01\")],\n onValueChange(details) {\n // details => { value: DateValue[], valueAsString: string[], view: string }\n console.log(\"selected date:\", details.valueAsString)\n },\n})\n```\n\nAlternatively, you can also use the `api.setValue` method to control the\nselected date.\n\n```tsx\n// parse the date string into a date object\nconst nextValue = datepicker.parse(\"2022-01-01\")\n\n// set the new value\napi.setValue(nextValue)\n```\n\n### Controlling the open state\n\nUse the `open` and `onOpenChange` callbacks to programmatically control the open\nstate of the date picker.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n open: true,\n onOpenChange(open) {\n console.log(\"open state changed to:\", open)\n },\n})\n```\n\nAlternatively, you can also use the `api.setOpen` method to manage the open\nstate of the datepicker's dialog.\n\n```tsx\n// open the date picker\napi.setOpen(true)\n\n// close the date picker\napi.setOpen(false)\n```\n\n### Setting the min and max dates\n\nTo constrain the date range that can be selected by the user, set the `min` and\n`max` properties in the machine context.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n min: datepicker.parse(\"2022-01-01\"),\n max: datepicker.parse(\"2022-12-31\"),\n})\n```\n\nWhen the min or max date value is reached, the next and prev triggers will be\ndisabled.\n\n### Changing the start of the week\n\nSet the `startOfWeek` property in the machine context to change the start of the\nweek. The property accepts a number from `0` to `6`, where `0` is Sunday and `6`\nis Saturday.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n startOfWeek: 1, // Monday\n})\n```\n\n### Disabling the date picker\n\nTo disable the date picker, set the `disabled` property in the machine context\nto `true`.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n disabled: true,\n})\n```\n\n### Rendering month and year pickers\n\nTo render the month and year pickers, use the `api.getMonthSelectProps` and\n`api.getYearSelectProps` prop getters.\n\n```tsx\n
\n \n\n \n
\n```\n\n### Marking unavailable dates\n\nTo mark specific dates as unavailable, set the `isDateUnavailable` function in\nthe machine context. This function should return `true` for dates that are\nunavailable.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n isDateUnavailable: (date, locale) => {\n // mark weekends as unavailable\n return date.day === 0 || date.day === 6\n },\n})\n```\n\nYou can also leverage the numerous helpers from\n[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html)\nto create more complex date availability rules.\n\n```tsx\nimport { isWeekend } from \"@internationalized/date\"\n\nconst service = useMachine(datepicker.machine, {\n isDateUnavailable: (date, locale) => {\n // mark weekends as unavailable\n return isWeekend(date, locale)\n },\n})\n```\n\n### Setting the calendar starting view\n\nThe calendar view is set to `day` by default. To change the starting view of the\ncalendar, set the `defaultView` property in the machine context to either `day`,\n`month`, or `year`.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n defaultView: \"month\",\n})\n```\n\n### Setting the read-only mode\n\nSet the `readOnly` property in the machine context to `true` to make the date\npicker read-only. This means that users can't change the selected date.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n readOnly: true,\n})\n```\n\n### Setting the focused date\n\nThe datepicker's focused date is set to either the first selected date or\ntoday's date by default.\n\nTo change the focused date, set the `defaultFocusedValue` property in the\nmachine context.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n defaultFocusedValue: datepicker.parse(\"2022-01-01\"),\n})\n```\n\n### Rendering the calendar inline\n\nTo render the calendar inline, we recommended setting the `inline` property to\n`true`.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n inline: true,\n})\n```\n\n### Usage within a form\n\nTo use the date picker within a form, set the `name` property in the machine\ncontext. This property is used to identify the date picker in the form data.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n name: \"date\",\n})\n```\n\n### Rendering fixed number of weeks\n\nThe datepicker's calendar will render the weeks needed to display all of the\ndays in the month. Sometimes this can result in a jump in the UI when navigating\nbetween different sized months (e.g., February vs. March).\n\nTo ensure the calendar renders the maximum number of weeks (6), you can set the\n`fixedWeeks` prop to `true`.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n fixedWeeks: true,\n})\n```\n\n### Listening to date changes\n\nTo listen to date changes, use the `onValueChange` callback in the machine\ncontext.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n onValueChange(details) {\n // details => { value: DateValue[], valueAsString: string[], view: string }\n console.log(\"selected date:\", details.valueAsString)\n },\n})\n```\n\n### Listening to view changes\n\nWhen the calendar view changes by click on the view controls, the `onViewChange`\ncallback is invoked.\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n onViewChange(details) {\n // details => { view: string }\n console.log(\"view changed to:\", details.view)\n },\n})\n```\n\n### Rendering multiple months\n\nTo display multiple months in the calendar\n\n- set the `numOfMonths` prop to the desired number of months\n- generate the weeks for the offset months using `api.getOffset({ months: 1 })`\n\n```tsx\nconst service = useMachine(datepicker.machine, {\n // ...\n numOfMonths: 2,\n})\n\nconst offset = api.getOffset({ months: 1 })\n```\n\nNext, render the calendar for the offset months.\n\n```tsx\n\n {offset.weeks.map((week, i) => (\n
\n ))}\n\n```\n\n## Styling guide\n\nEarlier, we mentioned that each date-picker part has a `data-part` attribute\nadded to them to select and style them in the DOM.\n\n```css\n[data-scope=\"date-picker\"][data-part=\"root\"] {\n /* styles for the root part */\n}\n\n[data-scope=\"date-picker\"][data-part=\"input\"] {\n /* styles for the input part */\n}\n\n[data-scope=\"date-picker\"][data-part=\"trigger\"] {\n /* styles for the trigger part */\n}\n\n[data-scope=\"date-picker\"][data-part=\"content\"] {\n /* styles for the input part */\n}\n```\n\n### Open State\n\n```css\n[data-scope=\"date-picker\"][data-part=\"trigger\"] {\n &[data-state=\"open\"] {\n /* styles for the open state */\n }\n\n &[data-state=\"closed\"] {\n /* styles for the closed state */\n }\n}\n```\n\n### Cell States\n\n```css\n[data-scope=\"date-picker\"][data-part=\"table-cell-trigger\"] {\n /* styles for the cell */\n\n &[data-selected] {\n /* styles for the selected date */\n }\n\n &[data-focus] {\n /* styles for the focused date */\n }\n\n &[data-disabled] {\n /* styles for the disabled date */\n }\n\n &[data-unavailable] {\n /* styles for the unavailable date */\n }\n\n &[data-today] {\n /* styles for the today date */\n }\n\n &[data-weekend] {\n /* styles for the weekend date */\n }\n}\n```\n\n## Methods and Properties\n\n### Machine Context\n\nThe date picker machine exposes the following context properties:\n\n**`locale`**\nType: `string`\nDescription: The locale (BCP 47 language tag) to use when formatting the date.\n\n**`translations`**\nType: `IntlTranslations`\nDescription: The localized messages to use.\n\n**`ids`**\nType: `Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; content: string; cellTrigger: (id: string) => string; prevTrigger: (view: DateView) => string; nextTrigger: (view: DateView) => string; viewTrigger: (view: DateView) => string; clearTrigger: string; control: string; input: (index: number) => string; trigger: string; monthSelect: string; yearSelect: string; positioner: string; }>`\nDescription: The ids of the elements in the date picker. Useful for composition.\n\n**`name`**\nType: `string`\nDescription: The `name` attribute of the input element.\n\n**`timeZone`**\nType: `string`\nDescription: The time zone to use\n\n**`disabled`**\nType: `boolean`\nDescription: Whether the calendar is disabled.\n\n**`readOnly`**\nType: `boolean`\nDescription: Whether the calendar is read-only.\n\n**`required`**\nType: `boolean`\nDescription: Whether the date picker is required\n\n**`invalid`**\nType: `boolean`\nDescription: Whether the date picker is invalid\n\n**`outsideDaySelectable`**\nType: `boolean`\nDescription: Whether day outside the visible range can be selected.\n\n**`min`**\nType: `DateValue`\nDescription: The minimum date that can be selected.\n\n**`max`**\nType: `DateValue`\nDescription: The maximum date that can be selected.\n\n**`closeOnSelect`**\nType: `boolean`\nDescription: Whether the calendar should close after the date selection is complete.\nThis is ignored when the selection mode is `multiple`.\n\n**`value`**\nType: `DateValue[]`\nDescription: The controlled selected date(s).\n\n**`defaultValue`**\nType: `DateValue[]`\nDescription: The initial selected date(s) when rendered.\nUse when you don't need to control the selected date(s) of the date picker.\n\n**`focusedValue`**\nType: `DateValue`\nDescription: The controlled focused date.\n\n**`defaultFocusedValue`**\nType: `DateValue`\nDescription: The initial focused date when rendered.\nUse when you don't need to control the focused date of the date picker.\n\n**`numOfMonths`**\nType: `number`\nDescription: The number of months to display.\n\n**`startOfWeek`**\nType: `number`\nDescription: The first day of the week.\n `0` - Sunday\n `1` - Monday\n `2` - Tuesday\n `3` - Wednesday\n `4` - Thursday\n `5` - Friday\n `6` - Saturday\n\n**`fixedWeeks`**\nType: `boolean`\nDescription: Whether the calendar should have a fixed number of weeks.\nThis renders the calendar with 6 weeks instead of 5 or 6.\n\n**`onValueChange`**\nType: `(details: ValueChangeDetails) => void`\nDescription: Function called when the value changes.\n\n**`onFocusChange`**\nType: `(details: FocusChangeDetails) => void`\nDescription: Function called when the focused date changes.\n\n**`onViewChange`**\nType: `(details: ViewChangeDetails) => void`\nDescription: Function called when the view changes.\n\n**`onOpenChange`**\nType: `(details: OpenChangeDetails) => void`\nDescription: Function called when the calendar opens or closes.\n\n**`isDateUnavailable`**\nType: `(date: DateValue, locale: string) => boolean`\nDescription: Returns whether a date of the calendar is available.\n\n**`selectionMode`**\nType: `SelectionMode`\nDescription: The selection mode of the calendar.\n- `single` - only one date can be selected\n- `multiple` - multiple dates can be selected\n- `range` - a range of dates can be selected\n\n**`format`**\nType: `(date: LocaleDetails) => string`\nDescription: The format of the date to display in the input.\n\n**`parse`**\nType: `(value: string, details: LocaleDetails) => DateValue`\nDescription: Function to parse the date from the input back to a DateValue.\n\n**`placeholder`**\nType: `string`\nDescription: The placeholder text to display in the input.\n\n**`view`**\nType: `DateView`\nDescription: The view of the calendar\n\n**`defaultView`**\nType: `DateView`\nDescription: The default view of the calendar\n\n**`minView`**\nType: `DateView`\nDescription: The minimum view of the calendar\n\n**`maxView`**\nType: `DateView`\nDescription: The maximum view of the calendar\n\n**`positioning`**\nType: `PositioningOptions`\nDescription: The user provided options used to position the date picker content\n\n**`open`**\nType: `boolean`\nDescription: The controlled open state of the date picker\n\n**`defaultOpen`**\nType: `boolean`\nDescription: The initial open state of the date picker when rendered.\nUse when you don't need to control the open state of the date picker.\n\n**`inline`**\nType: `boolean`\nDescription: Whether to render the date picker inline\n\n**`dir`**\nType: `\"ltr\" | \"rtl\"`\nDescription: The document's text/writing direction.\n\n**`id`**\nType: `string`\nDescription: The unique identifier of the machine.\n\n**`getRootNode`**\nType: `() => ShadowRoot | Node | Document`\nDescription: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.\n\n### Machine API\n\nThe date picker `api` exposes the following methods:\n\n**`focused`**\nType: `boolean`\nDescription: Whether the input is focused\n\n**`open`**\nType: `boolean`\nDescription: Whether the date picker is open\n\n**`disabled`**\nType: `boolean`\nDescription: Whether the date picker is disabled\n\n**`invalid`**\nType: `boolean`\nDescription: Whether the date picker is invalid\n\n**`inline`**\nType: `boolean`\nDescription: Whether the date picker is rendered inline\n\n**`view`**\nType: `DateView`\nDescription: The current view of the date picker\n\n**`getDaysInWeek`**\nType: `(week: number, from?: DateValue) => DateValue[]`\nDescription: Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.\n\n**`getOffset`**\nType: `(duration: DateDuration) => DateValueOffset`\nDescription: Returns the offset of the month based on the provided number of months.\n\n**`getRangePresetValue`**\nType: `(value: DateRangePreset) => DateValue[]`\nDescription: Returns the range of dates based on the provided date range preset.\n\n**`getMonthWeeks`**\nType: `(from?: DateValue) => DateValue[][]`\nDescription: Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.\n\n**`isUnavailable`**\nType: `(date: DateValue) => boolean`\nDescription: Returns whether the provided date is available (or can be selected)\n\n**`weeks`**\nType: `DateValue[][]`\nDescription: The weeks of the month. Represented as an array of arrays of dates.\n\n**`weekDays`**\nType: `WeekDay[]`\nDescription: The days of the week. Represented as an array of strings.\n\n**`visibleRange`**\nType: `VisibleRange`\nDescription: The visible range of dates.\n\n**`visibleRangeText`**\nType: `VisibleRangeText`\nDescription: The human readable text for the visible range of dates.\n\n**`value`**\nType: `DateValue[]`\nDescription: The selected date.\n\n**`valueAsDate`**\nType: `Date[]`\nDescription: The selected date as a Date object.\n\n**`valueAsString`**\nType: `string[]`\nDescription: The selected date as a string.\n\n**`focusedValue`**\nType: `DateValue`\nDescription: The focused date.\n\n**`focusedValueAsDate`**\nType: `Date`\nDescription: The focused date as a Date object.\n\n**`focusedValueAsString`**\nType: `string`\nDescription: The focused date as a string.\n\n**`selectToday`**\nType: `VoidFunction`\nDescription: Sets the selected date to today.\n\n**`setValue`**\nType: `(values: DateValue[]) => void`\nDescription: Sets the selected date to the given date.\n\n**`setFocusedValue`**\nType: `(value: DateValue) => void`\nDescription: Sets the focused date to the given date.\n\n**`clearValue`**\nType: `VoidFunction`\nDescription: Clears the selected date(s).\n\n**`setOpen`**\nType: `(open: boolean) => void`\nDescription: Function to open or close the calendar.\n\n**`focusMonth`**\nType: `(month: number) => void`\nDescription: Function to set the selected month.\n\n**`focusYear`**\nType: `(year: number) => void`\nDescription: Function to set the selected year.\n\n**`getYears`**\nType: `() => Cell[]`\nDescription: Returns the months of the year\n\n**`getYearsGrid`**\nType: `(props?: YearGridProps) => YearGridValue`\nDescription: Returns the years of the decade based on the columns.\nRepresented as an array of arrays of years.\n\n**`getDecade`**\nType: `() => Range`\nDescription: Returns the start and end years of the decade.\n\n**`getMonths`**\nType: `(props?: MonthFormatOptions) => Cell[]`\nDescription: Returns the months of the year\n\n**`getMonthsGrid`**\nType: `(props?: MonthGridProps) => MonthGridValue`\nDescription: Returns the months of the year based on the columns.\nRepresented as an array of arrays of months.\n\n**`format`**\nType: `(value: DateValue, opts?: Intl.DateTimeFormatOptions) => string`\nDescription: Formats the given date value based on the provided options.\n\n**`setView`**\nType: `(view: DateView) => void`\nDescription: Sets the view of the date picker.\n\n**`goToNext`**\nType: `VoidFunction`\nDescription: Goes to the next month/year/decade.\n\n**`goToPrev`**\nType: `VoidFunction`\nDescription: Goes to the previous month/year/decade.\n\n**`getDayTableCellState`**\nType: `(props: DayTableCellProps) => DayTableCellState`\nDescription: Returns the state details for a given cell.\n\n**`getMonthTableCellState`**\nType: `(props: TableCellProps) => TableCellState`\nDescription: Returns the state details for a given month cell.\n\n**`getYearTableCellState`**\nType: `(props: TableCellProps) => TableCellState`\nDescription: Returns the state details for a given year cell.\n\n### Data Attributes\n\n**`Root`**\n\n**`data-scope`**: date-picker\n**`data-part`**: root\n**`data-state`**: \"open\" | \"closed\"\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n\n**`Label`**\n\n**`data-scope`**: date-picker\n**`data-part`**: label\n**`data-state`**: \"open\" | \"closed\"\n**`data-index`**: The index of the item\n**`data-disabled`**: Present when disabled\n**`data-readonly`**: Present when read-only\n\n**`Control`**\n\n**`data-scope`**: date-picker\n**`data-part`**: control\n**`data-disabled`**: Present when disabled\n\n**`Content`**\n\n**`data-scope`**: date-picker\n**`data-part`**: content\n**`data-state`**: \"open\" | \"closed\"\n**`data-nested`**: popover\n**`data-has-nested`**: popover\n**`data-placement`**: The placement of the content\n**`data-inline`**: Present when the content is inline\n\n**`Table`**\n\n**`data-scope`**: date-picker\n**`data-part`**: table\n**`data-columns`**: \n**`data-view`**: The view of the table\n\n**`TableHead`**\n\n**`data-scope`**: date-picker\n**`data-part`**: table-head\n**`data-view`**: The view of the tablehead\n**`data-disabled`**: Present when disabled\n\n**`TableHeader`**\n\n**`data-scope`**: date-picker\n**`data-part`**: table-header\n**`data-view`**: The view of the tableheader\n**`data-disabled`**: Present when disabled\n\n**`TableBody`**\n\n**`data-scope`**: date-picker\n**`data-part`**: table-body\n**`data-view`**: The view of the tablebody\n**`data-disabled`**: Present when disabled\n\n**`TableRow`**\n\n**`data-scope`**: date-picker\n**`data-part`**: table-row\n**`data-disabled`**: Present when disabled\n**`data-view`**: The view of the tablerow\n\n**`DayTableCell`**\n\n**`data-scope`**: date-picker\n**`data-part`**: day-table-cell\n**`data-value`**: The value of the item\n\n**`DayTableCellTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: day-table-cell-trigger\n**`data-disabled`**: Present when disabled\n**`data-selected`**: Present when selected\n**`data-value`**: The value of the item\n**`data-view`**: The view of the daytablecelltrigger\n**`data-today`**: Present when the date represents today\n**`data-focus`**: Present when focused\n**`data-unavailable`**: Present when the date is unavailable based on the min and max date\n**`data-range-start`**: Present when is the start of a range\n**`data-range-end`**: Present when is the end of a range\n**`data-in-range`**: Present when is within the range\n**`data-outside-range`**: Present when is outside the range\n**`data-weekend`**: Present when is a weekend day\n**`data-in-hover-range`**: Present when in hovered range\n**`data-hover-range-start`**: Present when is the start of the hovered range\n**`data-hover-range-end`**: Present when is the end of the hovered range\n\n**`MonthTableCell`**\n\n**`data-scope`**: date-picker\n**`data-part`**: month-table-cell\n**`data-selected`**: Present when selected\n**`data-value`**: The value of the item\n\n**`MonthTableCellTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: month-table-cell-trigger\n**`data-selected`**: Present when selected\n**`data-disabled`**: Present when disabled\n**`data-focus`**: Present when focused\n**`data-in-range`**: Present when is within the range\n**`data-outside-range`**: Present when is outside the range\n**`data-view`**: The view of the monthtablecelltrigger\n**`data-value`**: The value of the item\n\n**`YearTableCell`**\n\n**`data-scope`**: date-picker\n**`data-part`**: year-table-cell\n**`data-selected`**: Present when selected\n**`data-value`**: The value of the item\n\n**`YearTableCellTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: year-table-cell-trigger\n**`data-selected`**: Present when selected\n**`data-focus`**: Present when focused\n**`data-in-range`**: Present when is within the range\n**`data-disabled`**: Present when disabled\n**`data-outside-range`**: Present when is outside the range\n**`data-value`**: The value of the item\n**`data-view`**: The view of the yeartablecelltrigger\n\n**`NextTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: next-trigger\n**`data-disabled`**: Present when disabled\n\n**`PrevTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: prev-trigger\n**`data-disabled`**: Present when disabled\n\n**`Trigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: trigger\n**`data-placement`**: The placement of the trigger\n**`data-state`**: \"open\" | \"closed\"\n\n**`View`**\n\n**`data-scope`**: date-picker\n**`data-part`**: view\n**`data-view`**: The view of the view\n\n**`ViewTrigger`**\n\n**`data-scope`**: date-picker\n**`data-part`**: view-trigger\n**`data-view`**: The view of the viewtrigger\n\n**`ViewControl`**\n\n**`data-scope`**: date-picker\n**`data-part`**: view-control\n**`data-view`**: The view of the viewcontrol\n\n**`Input`**\n\n**`data-scope`**: date-picker\n**`data-part`**: input\n**`data-index`**: The index of the item\n**`data-state`**: \"open\" | \"closed\"\n**`data-invalid`**: Present when invalid\n\n### CSS Variables\n\n","package":"@zag-js/date-picker","editUrl":"https://github.com/chakra-ui/zag/edit/main/website/data/components/date-picker.mdx"}