# gds-datepicker **Class**: `GdsDatepicker` **Tag**: `` ## Properties > Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values. | 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` | `-` | 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 | | `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`. This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected. Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. | ## 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` | 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.