# gds-datepicker

**Class**: `GdsDatepicker`

**Tag**: `<gds-datepicker>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `value` | `Date \| undefined` | `-` | The Date value of the datepicker. This can be set to undefined to clear the datepicker. This can be a string if set via the value attribute in markup, or via the setAttribute DOM API. |
| `min` | `any` | `-` | The minimum date that can be selected. |
| `max` | `any` | `-` | The maximum date that can be selected. |
| `open` | `boolean` | `-` | Controls whether the datepicker popover is open. |
| `supportingText` | `string` | `-` | The supporting text displayed between the label and the field itself |
| `size` | `'large' \| 'small'` | `-` | Whether to use the small variant of the datepicker field. |
| `plain` | `boolean` | `-` | Hides the header and the footer, while still keeping the accessible label  Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. |
| `showWeekNumbers` | `boolean` | `-` | Whether to show a column of week numbers in the calendar. |
| `hideLabel` | `boolean` | `-` | Whether to hide the label above the input field. |
| `clearable` | `boolean` | `-` | Whether the Clear button is shown under the calendar. |
| `hideTodayButton` | `boolean` | `-` | Whether to hide the Today button under the calendar. |
| `utcHours` | `any` | `-` | Controls the time component of dates selected in the calendar popover or spinbuttons in the field.  The time will be set in UTC. |
| `dateformat` | `any` | `-` | The date format to use. Accepts a string with the characters `y`, `m` and `d` in any order, separated by a delimiter. For example, `y-m-d` or `d/m/y`. All three characters must be present.  This will determine the structure of the input field.  Defaults to `y-m-d`. |
| `disabledWeekends` | `boolean` | `-` | Whether to disable weekends in the calendar. |
| `disabledDates` | `Date[] \| undefined` | `-` | An array of dates that should be disabled in the calendar. |
| `showExtendedSupportingText` | `boolean` | `-` | Whether the supporting text should be displayed or not. |
| `test_calendarButton` | `Promise<HTMLButtonElement>` | `-` | A reference to the calendar button element inside the shadow root. Inteded for use in integration tests. |
| `test_clearButton` | `HTMLButtonElement` | `-` | A reference to the clear button element inside the shadow root. Inteded for use in integration tests. |
| `test_todayButton` | `HTMLButtonElement` | `-` | A reference to the today button element inside the shadow root. Inteded for use in integration tests. |
| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
| `required` | `boolean` | `-` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
| `errorMessage` | `string` | `-` | This can be used to manually control the error message that will be displayed when the control is invalid. |
| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
| `label` | `string` | `-` | The label of the form control. |
| `name` | `string` | `-` |  |
| `disabled` | `boolean` | `-` | If the input is Disabled |


## Events

| Name | Type | Description |
|------|------|-------------|
| `change` | `Event` | Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically). |
| `gds-ui-state` | `CustomEvent<any>` | Fired when the dropdown is opened or closed. |


## Slots

| Name | Description |
|------|-------------|
| `extended-supporting-text` | A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button. |
| `message` | ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error. |
| `sub-label` | ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button. |


## Form Control

This component is a form control and inherits form-related properties and methods.
