## `<w-datepicker>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| calendar (JS only) | `HTMLDivElement` | `-` | - |
| day-format | `string` | `"PPPP"` | The date format used for calendar day accessible names. |
| header-format | `string` | `"MMMM yyyy"` | The date format used in the calendar header. |
| input (JS only) | `HTMLInputElement` | `-` | - |
| isCalendarOpen (JS only) | `boolean` | `false` | - |
| isDayDisabled (JS only) | `((day: Date) => boolean) \| undefined` | `-` | Function used to disable dates in the calendar. |
| label | `string \| undefined` | `-` | The label displayed above the date input. |
| lang | `string` | `-` | The locale used for calendar labels and date formatting. |
| month (JS only) | `unknown` | `-` | - |
| name | `string \| undefined` | `-` | The name submitted with the date value. |
| navigationDate (JS only) | `Date` | `-` | - |
| previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. |
| resetFormControl (JS only) | `resetFormControl() => void` | `-` | - |
| selectedCell (JS only) | `HTMLTableCellElement` | `-` | - |
| selectedDate (JS only) | `Date \| null` | `-` | - |
| shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
| todayCell (JS only) | `HTMLTableCellElement` | `-` | - |
| toggleButton (JS only) | `HTMLButtonElement` | `-` | - |
| value | `string \| undefined` | `-` | The selected date value. |
| weekday-format | `string` | `"EEEEEE"` | The weekday format shown above the calendar grid. |
| weeks (JS only) | `unknown` | `-` | - |
| wrapper (JS only) | `HTMLDivElement` | `-` | - |

### Property Details

#### calendar (JS only)



- Type: `HTMLDivElement`
- Default: `-`

#### day-format

The date format used for calendar day accessible names.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).

- Type: `string`
- Default: `"PPPP"`

#### header-format

The date format used in the calendar header.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).

- Type: `string`
- Default: `"MMMM yyyy"`

#### input (JS only)



- Type: `HTMLInputElement`
- Default: `-`

#### isCalendarOpen (JS only)



- Type: `boolean`
- Default: `false`

#### isDayDisabled (JS only)

Function used to disable dates in the calendar.

Set this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar.

- Type: `((day: Date) => boolean) | undefined`
- Default: `-`

#### label

The label displayed above the date input.

Use this to give the datepicker a visible and accessible name.

- Type: `string | undefined`
- Default: `-`

#### lang

The locale used for calendar labels and date formatting.

This takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.

- Type: `string`
- Default: `-`

#### month (JS only)



- Type: `unknown`
- Default: `-`

#### name

The name submitted with the date value.

Use this when the datepicker belongs to a form and its value should be included in form data.

- Type: `string | undefined`
- Default: `-`

#### navigationDate (JS only)



- Type: `Date`
- Default: `-`

#### previousMonthButton (JS only)

This is the first focusable element, needed for the modal focus trap.

Don't cache this and other `@query` fields from inside the calendar modal.
They work the first time, but once the calendar is closed and reopened
the query will point to an element that doesn't exist anymore.

- Type: `HTMLButtonElement`
- Default: `-`

#### resetFormControl (JS only)



- Type: `resetFormControl() => void`
- Default: `-`

#### selectedCell (JS only)



- Type: `HTMLTableCellElement`
- Default: `-`

#### selectedDate (JS only)



- Type: `Date | null`
- Default: `-`

#### shadowRootOptions (JS only)



- Type: `object`
- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`

#### todayCell (JS only)



- Type: `HTMLTableCellElement`
- Default: `-`

#### toggleButton (JS only)



- Type: `HTMLButtonElement`
- Default: `-`

#### value

The selected date value.

Use an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.

- Type: `string | undefined`
- Default: `-`

#### weekday-format

The weekday format shown above the calendar grid.

The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).

- Type: `string`
- Default: `"EEEEEE"`

#### weeks (JS only)



- Type: `unknown`
- Default: `-`

#### wrapper (JS only)



- Type: `HTMLDivElement`
- Default: `-`

