## `` API Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties). ### Properties | Name | Type | Default | Summary | |-|-|-|-| | calendar (JS only) | `HTMLDivElement` | `-` | - | | checkValidity (JS only) | `checkValidity() => boolean` | `-` | Checks whether the textarea passes constraint validation | | day-format | `string` | `"PPPP"` | The date format used for calendar day accessible names. | | disabled | `boolean` | `false` | Makes the element not focusable and hides it from form submits | | header-format | `string` | `"MMMM yyyy"` | The date format used in the calendar header. | | help-text | `string \| undefined` | `-` | Description shown below the input field | | input (JS only) | `HTMLInputElement` | `-` | - | | invalid | `boolean` | `false` | Mark the form field as invalid. | | 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` | `-` | - | | optional | `boolean` | `false` | Indicate visually that the field is optional | | previousMonthButton (JS only) | `HTMLButtonElement` | `-` | This is the first focusable element, needed for the modal focus trap. | | readonly | `boolean` | `false` | Whether the input can be selected but not changed by the user | | reportValidity (JS only) | `reportValidity() => boolean` | `-` | Checks validity and shows the browser's validation message if invalid | | required | `boolean` | `false` | Whether user input is required on the input before form submission | | resetFormControl (JS only) | `resetFormControl() => void` | `-` | - | | selectedCell (JS only) | `HTMLTableCellElement` | `-` | - | | selectedDate (JS only) | `Date \| null` | `-` | - | | setCustomValidity (JS only) | `setCustomValidity(message: string) => void` | `-` | Sets a custom validation message. Pass an empty string to clear. | | shadowRootOptions (JS only) | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - | | todayCell (JS only) | `HTMLTableCellElement` | `-` | - | | toggleButton (JS only) | `HTMLButtonElement` | `-` | - | | tooltip | `string \| undefined` | `-` | Supplementary information that should show in a tooltip behind an information icon after the label. | | validationMessage (JS only) | `string` | `-` | Returns the validation message if the textarea is invalid, otherwise an empty string | | validity (JS only) | `ValidityState` | `-` | Returns the validity state of the textarea | | 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: `-` #### checkValidity (JS only) Checks whether the textarea passes constraint validation - Type: `checkValidity() => boolean` - 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"` #### disabled Keep in mind that using disabled in its current form is an anti-pattern. There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. Please consider more informative alternatives before choosing to use disabled on an element. - Type: `boolean` - Default: `false` #### 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"` #### help-text Use in combination with `invalid` to show as a validation error message, or on its own to show a help text. - Type: `string | undefined` - Default: `-` #### input (JS only) - Type: `HTMLInputElement` - Default: `-` #### invalid Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem. - Type: `boolean` - Default: `false` #### 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 `` `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: `-` #### optional Indicate visually that the field is optional - Type: `boolean` - Default: `false` #### 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: `-` #### readonly Whether the input can be selected but not changed by the user - Type: `boolean` - Default: `false` #### reportValidity (JS only) Checks validity and shows the browser's validation message if invalid - Type: `reportValidity() => boolean` - Default: `-` #### required Whether user input is required on the input before form submission - Type: `boolean` - Default: `false` #### resetFormControl (JS only) - Type: `resetFormControl() => void` - Default: `-` #### selectedCell (JS only) - Type: `HTMLTableCellElement` - Default: `-` #### selectedDate (JS only) - Type: `Date | null` - Default: `-` #### setCustomValidity (JS only) Sets a custom validation message. Pass an empty string to clear. - Type: `setCustomValidity(message: string) => void` - Default: `-` #### shadowRootOptions (JS only) - Type: `object` - Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` #### todayCell (JS only) - Type: `HTMLTableCellElement` - Default: `-` #### toggleButton (JS only) - Type: `HTMLButtonElement` - Default: `-` #### tooltip Supplementary information that should show in a tooltip behind an information icon after the label. You must provide a label to be able to show an info icon with a tooltip. - Type: `string | undefined` - Default: `-` #### validationMessage (JS only) Returns the validation message if the textarea is invalid, otherwise an empty string - Type: `string` - Default: `-` #### validity (JS only) Returns the validity state of the textarea - Type: `ValidityState` - 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: `-`