# or
yarn add @zag-js/date-picker @zag-js/vue
```

## Anatomy

To set up the date-picker correctly, you'll need to understand its anatomy and
how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the date picker package into your project

```tsx
import * as datepicker from "@zag-js/date-picker"
```

The date picker package exports these key functions:

- `machine` â The state machine logic for the date-picker widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.
- `parse` - The function that parses the date string into a date object.
  Requires passing the
  [ISO 8601 date format](https://www.iso.org/iso-8601-date-and-time-format.html)
  as the first argument.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
date-picker machine in your project ð¥

```html
<script setup lang="ts">
  import * as datepicker from "@zag-js/date-picker"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed, Fragment, Teleport } from "vue"

  const service = useMachine(datepicker.machine, {
    id: "1",
  })
  const api = computed(() => datepicker.connect(service, normalizeProps))
</script>

<template>
  <>
    <div v-bind="api.getControlProps()">
      <input v-bind="api.getInputProps()" />
      <button v-bind="api.getTriggerProps()">ð</button>
    </div>
    <Teleport to="body">
      <div v-bind="api.getPositionerProps()">
        <div v-bind="api.getContentProps()">
          <!-- Day View -->
          <div v-show="api.view !== 'day'">
            <div v-bind="api.getViewControlProps({ view: 'year' })">
              <button v-bind="api.getPrevTriggerProps()">Prev</button>
              <button v-bind="api.getViewTriggerProps()">
                {{api.visibleRangeText.start}}
              </button>
              <button v-bind="api.getNextTriggerProps()">Next</button>
            </div>

            <table v-bind="api.getTableProps({ view: 'day' })">
              <thead v-bind="api.getTableHeaderProps({ view: 'day' })">
                <tr v-bind="api.getTableRowProps({ view: 'day' })">
                  <template v-for="(day) in api.weekDays">
                    <th scope="col">
                      {{day.narrow}}
                    </th>
                  </template>
                </tr>
              </thead>
              <tbody  v-bind="api.getTableBodyProps({ view: 'day' })">
                <template v-for="(week) in api.weeks">
                  <tr v-bind="api.getTableRowProps({ view: 'day' })">
                    <template v-for="(value) in week">
                      <td v-bind="api.getDayTableCellProps({ value })">
                        <div  v-bind="api.getDayTableCellTriggerProps({ value })">
                          {{value.day}}
                        </div>
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>

          <!-- Month View -->
          <div v-show="api.view !== 'month'">
            <div v-bind="api.getViewControlProps({ view: 'month' })">
              <button v-bind="api.getPrevTriggerProps({ view: 'month' })">
                Prev
              </button>
              <button v-bind="api.getViewTriggerProps({ view: 'month' })">
                {{ api.visibleRange.start.year }}
              </button>
              <button v-bind="api.getNextTriggerProps({ view: 'month' })">
                Next
              </button>
            </div>

            <table v-bind="api.getTableProps({ view: 'month', columns: 4 })">
              <tbody v-bind="api.getTableBodyProps({ view: 'month' })">
                <template v-for="(months) in api.getMonthsGrid({ columns: 4, format: 'short' })">
                  <tr v-bind="api.getTableRowProps()">
                    <template v-for="(month) in months">
                      <td v-bind="api.getMonthTableCellProps({
                        ...month,
                        columns: 4,
                      })">
                        <div v-bind="api.getMonthTableCellTriggerProps({
                          ...month,
                          columns: 4,
                        })">
                          {{ month.label }}
                        </div>
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>

          <!-- Year View -->
          <div v-show="api.view !== 'year'">
            <div v-bind="api.getViewControlProps({ view: 'year' })">
              <button v-bind="api.getPrevTriggerProps({ view: 'year' })">
                Prev
              </button>
              <span>
                {{ api.getDecade().start }} - {{ api.getDecade().end }}
              </span>
              <button v-bind="api.getNextTriggerProps({ view: 'year' })">
                Next
              </button>
            </div>

            <table v-bind="api.getTableProps({ view: 'year', columns: 4 })">
              <tbody v-bind="api.getTableBodyProps()">
                <template v-for="(years) in api.getYearsGrid({ columns: 4 })">
                  <tr v-bind="api.getTableRowProps({ view: 'year' })">
                    <template v-for="(year) in years">
                      <td v-bind="api.getYearTableCellProps({
                        ...year,
                        columns: 4,
                      })">
                        <div v-bind="api.getYearTableCellTriggerProps({
                          ...year,
                          columns: 4,
                        })">
                          {{ year.label }}
                        </div>
                      </td>
                    </template>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </Teleport>
  </>
</template>
```

### Setting the initial date

To set the initial value that is rendered by the date picker, set the `value`
property in the machine context.

```tsx
const service = useMachine(datepicker.machine, {
  defaultValue: [datepicker.parse("2022-01-01")],
})
```

### Controlling the selected date

Use the `value` and `onValueChange` properties to programmatically control the
selected date.

```tsx
const service = useMachine(datepicker.machine, {
  value: [datepicker.parse("2022-01-01")],
  onValueChange(details) {
    // details => { value: DateValue[], valueAsString: string[], view: string }
    console.log("selected date:", details.valueAsString)
  },
})
```

Alternatively, you can also use the `api.setValue` method to control the
selected date.

```tsx
// parse the date string into a date object
const nextValue = datepicker.parse("2022-01-01")

// set the new value
api.setValue(nextValue)
```

### Controlling the open state

Use the `open` and `onOpenChange` callbacks to programmatically control the open
state of the date picker.

```tsx
const service = useMachine(datepicker.machine, {
  open: true,
  onOpenChange(open) {
    console.log("open state changed to:", open)
  },
})
```

Alternatively, you can also use the `api.setOpen` method to manage the open
state of the datepicker's dialog.

```tsx
// open the date picker
api.setOpen(true)

// close the date picker
api.setOpen(false)
```

### Setting the min and max dates

To constrain the date range that can be selected by the user, set the `min` and
`max` properties in the machine context.

```tsx
const service = useMachine(datepicker.machine, {
  min: datepicker.parse("2022-01-01"),
  max: datepicker.parse("2022-12-31"),
})
```

When the min or max date value is reached, the next and prev triggers will be
disabled.

### Changing the start of the week

Set the `startOfWeek` property in the machine context to change the start of the
week. The property accepts a number from `0` to `6`, where `0` is Sunday and `6`
is Saturday.

```tsx
const service = useMachine(datepicker.machine, {
  startOfWeek: 1, // Monday
})
```

### Disabling the date picker

To disable the date picker, set the `disabled` property in the machine context
to `true`.

```tsx
const service = useMachine(datepicker.machine, {
  disabled: true,
})
```

### Rendering month and year pickers

To render the month and year pickers, use the `api.getMonthSelectProps` and
`api.getYearSelectProps` prop getters.

```tsx
<div>
  <select {...api.getMonthSelectProps()}>
    {api.getMonths().map((month, i) => (
      <option key={i} value={month.value}>
        {month.label}
      </option>
    ))}
  </select>

  <select {...api.getYearSelectProps()}>
    {getYearsRange({ from: 1_000, to: 4_000 }).map((year, i) => (
      <option key={i} value={year}>
        {year}
      </option>
    ))}
  </select>
</div>
```

### Marking unavailable dates

To mark specific dates as unavailable, set the `isDateUnavailable` function in
the machine context. This function should return `true` for dates that are
unavailable.

```tsx
const service = useMachine(datepicker.machine, {
  isDateUnavailable: (date, locale) => {
    // mark weekends as unavailable
    return date.day === 0 || date.day === 6
  },
})
```

You can also leverage the numerous helpers from
[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html)
to create more complex date availability rules.

```tsx
import { isWeekend } from "@internationalized/date"

const service = useMachine(datepicker.machine, {
  isDateUnavailable: (date, locale) => {
    // mark weekends as unavailable
    return isWeekend(date, locale)
  },
})
```

### Setting the calendar starting view

The calendar view is set to `day` by default. To change the starting view of the
calendar, set the `defaultView` property in the machine context to either `day`,
`month`, or `year`.

```tsx
const service = useMachine(datepicker.machine, {
  defaultView: "month",
})
```

### Setting the read-only mode

Set the `readOnly` property in the machine context to `true` to make the date
picker read-only. This means that users can't change the selected date.

```tsx
const service = useMachine(datepicker.machine, {
  readOnly: true,
})
```

### Setting the focused date

The datepicker's focused date is set to either the first selected date or
today's date by default.

To change the focused date, set the `defaultFocusedValue` property in the
machine context.

```tsx
const service = useMachine(datepicker.machine, {
  defaultFocusedValue: datepicker.parse("2022-01-01"),
})
```

### Rendering the calendar inline

To render the calendar inline, we recommended setting the `inline` property to
`true`.

```tsx
const service = useMachine(datepicker.machine, {
  inline: true,
})
```

### Usage within a form

To use the date picker within a form, set the `name` property in the machine
context. This property is used to identify the date picker in the form data.

```tsx
const service = useMachine(datepicker.machine, {
  name: "date",
})
```

### Rendering fixed number of weeks

The datepicker's calendar will render the weeks needed to display all of the
days in the month. Sometimes this can result in a jump in the UI when navigating
between different sized months (e.g., February vs. March).

To ensure the calendar renders the maximum number of weeks (6), you can set the
`fixedWeeks` prop to `true`.

```tsx
const service = useMachine(datepicker.machine, {
  fixedWeeks: true,
})
```

### Listening to date changes

To listen to date changes, use the `onValueChange` callback in the machine
context.

```tsx
const service = useMachine(datepicker.machine, {
  onValueChange(details) {
    // details => { value: DateValue[], valueAsString: string[], view: string }
    console.log("selected date:", details.valueAsString)
  },
})
```

### Listening to view changes

When the calendar view changes by click on the view controls, the `onViewChange`
callback is invoked.

```tsx
const service = useMachine(datepicker.machine, {
  onViewChange(details) {
    // details => { view: string }
    console.log("view changed to:", details.view)
  },
})
```

### Rendering multiple months

To display multiple months in the calendar

- set the `numOfMonths` prop to the desired number of months
- generate the weeks for the offset months using `api.getOffset({ months: 1 })`

```tsx
const service = useMachine(datepicker.machine, {
  // ...
  numOfMonths: 2,
})

const offset = api.getOffset({ months: 1 })
```

Next, render the calendar for the offset months.

```tsx
<tbody {...api.getTableBodyProps({ view: "day" })}>
  {offset.weeks.map((week, i) => (
    <tr key={i} {...api.getTableRowProps({ view: "day" })}>
      {week.map((value, i) => (
        <td
          key={i}
          {...api.getDayTableCellProps({
            value,
            visibleRange: offset.visibleRange,
          })}
        >
          <div
            {...api.getDayTableCellTriggerProps({
              value,
              visibleRange: offset.visibleRange,
            })}
          >
            {value.day}
          </div>
        </td>
      ))}
    </tr>
  ))}
</tbody>
```

## Styling guide

Earlier, we mentioned that each date-picker part has a `data-part` attribute
added to them to select and style them in the DOM.

```css
[data-scope="date-picker"][data-part="root"] {
  /* styles for the root part */
}

[data-scope="date-picker"][data-part="input"] {
  /* styles for the input part */
}

[data-scope="date-picker"][data-part="trigger"] {
  /* styles for the trigger part */
}

[data-scope="date-picker"][data-part="content"] {
  /* styles for the input part */
}
```

### Open State

```css
[data-scope="date-picker"][data-part="trigger"] {
  &[data-state="open"] {
    /* styles for the open state */
  }

  &[data-state="closed"] {
    /* styles for the closed state */
  }
}
```

### Cell States

```css
[data-scope="date-picker"][data-part="table-cell-trigger"] {
  /* styles for the cell */

  &[data-selected] {
    /* styles for the selected date */
  }

  &[data-focus] {
    /* styles for the focused date */
  }

  &[data-disabled] {
    /* styles for the disabled date */
  }

  &[data-unavailable] {
    /* styles for the unavailable date */
  }

  &[data-today] {
    /* styles for the today date */
  }

  &[data-weekend] {
    /* styles for the weekend date */
  }
}
```

## Methods and Properties

### Machine Context

The date picker machine exposes the following context properties:

**`locale`**
Type: `string`
Description: The locale (BCP 47 language tag) to use when formatting the date.

**`translations`**
Type: `IntlTranslations`
Description: The localized messages to use.

**`ids`**
Type: `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; }>`
Description: The ids of the elements in the date picker. Useful for composition.

**`name`**
Type: `string`
Description: The `name` attribute of the input element.

**`timeZone`**
Type: `string`
Description: The time zone to use

**`disabled`**
Type: `boolean`
Description: Whether the calendar is disabled.

**`readOnly`**
Type: `boolean`
Description: Whether the calendar is read-only.

**`required`**
Type: `boolean`
Description: Whether the date picker is required

**`invalid`**
Type: `boolean`
Description: Whether the date picker is invalid

**`outsideDaySelectable`**
Type: `boolean`
Description: Whether day outside the visible range can be selected.

**`min`**
Type: `DateValue`
Description: The minimum date that can be selected.

**`max`**
Type: `DateValue`
Description: The maximum date that can be selected.

**`closeOnSelect`**
Type: `boolean`
Description: Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`.

**`value`**
Type: `DateValue[]`
Description: The controlled selected date(s).

**`defaultValue`**
Type: `DateValue[]`
Description: The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker.

**`focusedValue`**
Type: `DateValue`
Description: The controlled focused date.

**`defaultFocusedValue`**
Type: `DateValue`
Description: The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker.

**`numOfMonths`**
Type: `number`
Description: The number of months to display.

**`startOfWeek`**
Type: `number`
Description: The first day of the week.
 `0` - Sunday
 `1` - Monday
 `2` - Tuesday
 `3` - Wednesday
 `4` - Thursday
 `5` - Friday
 `6` - Saturday

**`fixedWeeks`**
Type: `boolean`
Description: Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Description: Function called when the value changes.

**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Description: Function called when the focused date changes.

**`onViewChange`**
Type: `(details: ViewChangeDetails) => void`
Description: Function called when the view changes.

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Description: Function called when the calendar opens or closes.

**`isDateUnavailable`**
Type: `(date: DateValue, locale: string) => boolean`
Description: Returns whether a date of the calendar is available.

**`selectionMode`**
Type: `SelectionMode`
Description: The selection mode of the calendar.
- `single` - only one date can be selected
- `multiple` - multiple dates can be selected
- `range` - a range of dates can be selected

**`format`**
Type: `(date: LocaleDetails) => string`
Description: The format of the date to display in the input.

**`parse`**
Type: `(value: string, details: LocaleDetails) => DateValue`
Description: Function to parse the date from the input back to a DateValue.

**`placeholder`**
Type: `string`
Description: The placeholder text to display in the input.

**`view`**
Type: `DateView`
Description: The view of the calendar

**`defaultView`**
Type: `DateView`
Description: The default view of the calendar

**`minView`**
Type: `DateView`
Description: The minimum view of the calendar

**`maxView`**
Type: `DateView`
Description: The maximum view of the calendar

**`positioning`**
Type: `PositioningOptions`
Description: The user provided options used to position the date picker content

**`open`**
Type: `boolean`
Description: The controlled open state of the date picker

**`defaultOpen`**
Type: `boolean`
Description: The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker.

**`inline`**
Type: `boolean`
Description: Whether to render the date picker inline

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

### Machine API

The date picker `api` exposes the following methods:

**`focused`**
Type: `boolean`
Description: Whether the input is focused

**`open`**
Type: `boolean`
Description: Whether the date picker is open

**`disabled`**
Type: `boolean`
Description: Whether the date picker is disabled

**`invalid`**
Type: `boolean`
Description: Whether the date picker is invalid

**`readOnly`**
Type: `boolean`
Description: Whether the date picker is read-only

**`inline`**
Type: `boolean`
Description: Whether the date picker is rendered inline

**`numOfMonths`**
Type: `number`
Description: The number of months to display

**`selectionMode`**
Type: `SelectionMode`
Description: The selection mode (single, multiple, or range)

**`view`**
Type: `DateView`
Description: The current view of the date picker

**`getDaysInWeek`**
Type: `(week: number, from?: DateValue) => DateValue[]`
Description: Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.

**`getOffset`**
Type: `(duration: DateDuration) => DateValueOffset`
Description: Returns the offset of the month based on the provided number of months.

**`getRangePresetValue`**
Type: `(value: DateRangePreset) => DateValue[]`
Description: Returns the range of dates based on the provided date range preset.

**`getMonthWeeks`**
Type: `(from?: DateValue) => DateValue[][]`
Description: Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.

**`isUnavailable`**
Type: `(date: DateValue) => boolean`
Description: Returns whether the provided date is available (or can be selected)

**`weeks`**
Type: `DateValue[][]`
Description: The weeks of the month. Represented as an array of arrays of dates.

**`weekDays`**
Type: `WeekDay[]`
Description: The days of the week. Represented as an array of strings.

**`visibleRange`**
Type: `VisibleRange`
Description: The visible range of dates.

**`visibleRangeText`**
Type: `VisibleRangeText`
Description: The human readable text for the visible range of dates.

**`value`**
Type: `DateValue[]`
Description: The selected date.

**`valueAsDate`**
Type: `Date[]`
Description: The selected date as a Date object.

**`valueAsString`**
Type: `string[]`
Description: The selected date as a string.

**`focusedValue`**
Type: `DateValue`
Description: The focused date.

**`focusedValueAsDate`**
Type: `Date`
Description: The focused date as a Date object.

**`focusedValueAsString`**
Type: `string`
Description: The focused date as a string.

**`selectToday`**
Type: `VoidFunction`
Description: Sets the selected date to today.

**`setValue`**
Type: `(values: DateValue[]) => void`
Description: Sets the selected date to the given date.

**`setFocusedValue`**
Type: `(value: DateValue) => void`
Description: Sets the focused date to the given date.

**`clearValue`**
Type: `VoidFunction`
Description: Clears the selected date(s).

**`setOpen`**
Type: `(open: boolean) => void`
Description: Function to open or close the calendar.

**`focusMonth`**
Type: `(month: number) => void`
Description: Function to set the selected month.

**`focusYear`**
Type: `(year: number) => void`
Description: Function to set the selected year.

**`getYears`**
Type: `() => Cell[]`
Description: Returns the months of the year

**`getYearsGrid`**
Type: `(props?: YearGridProps) => YearGridValue`
Description: Returns the years of the decade based on the columns.
Represented as an array of arrays of years.

**`getDecade`**
Type: `() => Range<number>`
Description: Returns the start and end years of the decade.

**`getMonths`**
Type: `(props?: MonthFormatOptions) => Cell[]`
Description: Returns the months of the year

**`getMonthsGrid`**
Type: `(props?: MonthGridProps) => MonthGridValue`
Description: Returns the months of the year based on the columns.
Represented as an array of arrays of months.

**`format`**
Type: `(value: DateValue, opts?: Intl.DateTimeFormatOptions) => string`
Description: Formats the given date value based on the provided options.

**`setView`**
Type: `(view: DateView) => void`
Description: Sets the view of the date picker.

**`goToNext`**
Type: `VoidFunction`
Description: Goes to the next month/year/decade.

**`goToPrev`**
Type: `VoidFunction`
Description: Goes to the previous month/year/decade.

**`getDayTableCellState`**
Type: `(props: DayTableCellProps) => DayTableCellState`
Description: Returns the state details for a given cell.

**`getMonthTableCellState`**
Type: `(props: TableCellProps) => TableCellState`
Description: Returns the state details for a given month cell.

**`getYearTableCellState`**
Type: `(props: TableCellProps) => TableCellState`
Description: Returns the state details for a given year cell.

### Data Attributes

**`Root`**

**`data-scope`**: date-picker
**`data-part`**: root
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-empty`**: Present when no value is selected

**`Label`**

**`data-scope`**: date-picker
**`data-part`**: label
**`data-state`**: "open" | "closed"
**`data-index`**: The index of the item
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only

**`Control`**

**`data-scope`**: date-picker
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-placeholder-shown`**: Present when placeholder is shown

**`Content`**

**`data-scope`**: date-picker
**`data-part`**: content
**`data-state`**: "open" | "closed"
**`data-nested`**: popover
**`data-has-nested`**: popover
**`data-placement`**: The placement of the content
**`data-inline`**: Present when the content is inline

**`Table`**

**`data-scope`**: date-picker
**`data-part`**: table
**`data-columns`**: 
**`data-view`**: The view of the table

**`TableHead`**

**`data-scope`**: date-picker
**`data-part`**: table-head
**`data-view`**: The view of the tablehead
**`data-disabled`**: Present when disabled

**`TableHeader`**

**`data-scope`**: date-picker
**`data-part`**: table-header
**`data-view`**: The view of the tableheader
**`data-disabled`**: Present when disabled

**`TableBody`**

**`data-scope`**: date-picker
**`data-part`**: table-body
**`data-view`**: The view of the tablebody
**`data-disabled`**: Present when disabled

**`TableRow`**

**`data-scope`**: date-picker
**`data-part`**: table-row
**`data-disabled`**: Present when disabled
**`data-view`**: The view of the tablerow

**`DayTableCell`**

**`data-scope`**: date-picker
**`data-part`**: day-table-cell
**`data-value`**: The value of the item

**`DayTableCellTrigger`**

**`data-scope`**: date-picker
**`data-part`**: day-table-cell-trigger
**`data-disabled`**: Present when disabled
**`data-selected`**: Present when selected
**`data-value`**: The value of the item
**`data-view`**: The view of the daytablecelltrigger
**`data-today`**: Present when the date represents today
**`data-focus`**: Present when focused
**`data-unavailable`**: Present when the date is unavailable based on the min and max date
**`data-range-start`**: Present when is the start of a range
**`data-range-end`**: Present when is the end of a range
**`data-in-range`**: Present when is within the range
**`data-outside-range`**: Present when is outside the range
**`data-weekend`**: Present when is a weekend day
**`data-in-hover-range`**: Present when in hovered range
**`data-hover-range-start`**: Present when is the start of the hovered range
**`data-hover-range-end`**: Present when is the end of the hovered range

**`MonthTableCell`**

**`data-scope`**: date-picker
**`data-part`**: month-table-cell
**`data-selected`**: Present when selected
**`data-value`**: The value of the item

**`MonthTableCellTrigger`**

**`data-scope`**: date-picker
**`data-part`**: month-table-cell-trigger
**`data-selected`**: Present when selected
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused
**`data-in-range`**: Present when is within the range
**`data-outside-range`**: Present when is outside the range
**`data-view`**: The view of the monthtablecelltrigger
**`data-value`**: The value of the item

**`YearTableCell`**

**`data-scope`**: date-picker
**`data-part`**: year-table-cell
**`data-selected`**: Present when selected
**`data-value`**: The value of the item

**`YearTableCellTrigger`**

**`data-scope`**: date-picker
**`data-part`**: year-table-cell-trigger
**`data-selected`**: Present when selected
**`data-focus`**: Present when focused
**`data-in-range`**: Present when is within the range
**`data-disabled`**: Present when disabled
**`data-outside-range`**: Present when is outside the range
**`data-value`**: The value of the item
**`data-view`**: The view of the yeartablecelltrigger

**`NextTrigger`**

**`data-scope`**: date-picker
**`data-part`**: next-trigger
**`data-disabled`**: Present when disabled

**`PrevTrigger`**

**`data-scope`**: date-picker
**`data-part`**: prev-trigger
**`data-disabled`**: Present when disabled

**`Trigger`**

**`data-scope`**: date-picker
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-state`**: "open" | "closed"
**`data-placeholder-shown`**: Present when placeholder is shown

**`View`**

**`data-scope`**: date-picker
**`data-part`**: view
**`data-view`**: The view of the view

**`ViewTrigger`**

**`data-scope`**: date-picker
**`data-part`**: view-trigger
**`data-view`**: The view of the viewtrigger

**`ViewControl`**

**`data-scope`**: date-picker
**`data-part`**: view-control
**`data-view`**: The view of the viewcontrol

**`Input`**

**`data-scope`**: date-picker
**`data-part`**: input
**`data-index`**: The index of the item
**`data-state`**: "open" | "closed"
**`data-placeholder-shown`**: Present when placeholder is shown
**`data-invalid`**: Present when invalid

### CSS Variables

<CssVarTable name="date-picker" />
A dialog is a window overlaid on either the primary window or another dialog
window. Content behind a modal dialog is inert, meaning that users cannot
interact with it.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/dialog)
[Logic Visualizer](https://zag-visualizer.vercel.app/dialog)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/dialog)



**Features**

- Supports modal and non-modal modes
- Focus is trapped and scrolling is blocked in the modal mode
- Provides screen reader announcements via rendered title and description
- Pressing `Esc` closes the dialog

## Installation

To use the dialog machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/dialog @zag-js/vue