## SignetDatePicker Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | --------------- | | `clearable` | `clearable` | A boolean indicating whether to show clear button | `boolean` | `false` | | `date` | `date` | The value of the date in string format | `string` | `undefined` | | `defaultValue` | `default-value` | The default date value of the calendar (e.g., 'MM/DD/YYYY') | `string` | `undefined` | | `disabled` | `disabled` | A boolean indicating whether the date picker is disabled | `boolean` | `false` | | `dummyDate` | `dummy-date` | The dummy date of the date range in string format (e.g., 'MM/DD/YYYY') | `string` | `undefined` | | `error` | `error` | A boolean indicating whether the date picker is in an error state with red border color. | `boolean` | `undefined` | | `label` | `label` | The label for the date input field | `string` | `"Select Date"` | | `locale` | `locale` | The locale for formatting the date (e.g., 'en-US', 'en-GB') | `string` | `"en-US"` | | `maxDate` | `max-date` | The maximun selectable date of the date range in string format (e.g., 'MM/DD/YYYY') | `string` | `undefined` | | `minDate` | `min-date` | The minimum selectable date the date range in string format (e.g., 'MM/DD/YYYY') | `string` | `undefined` | | `required` | `required` | If true, the date picker is required and a colored asterisk will be shown in the label. | `boolean` | `false` | | `requiredAsteriskColor` | `required-asterisk-color` | The color of the required asterisk in the label. Defaults to 'red'. | `string` | `'red'` | | `size` | `size` | The size of the date picker input. Can be 'sm' \| 'small', 'md' \| 'medium', or 'lg' \| 'large'. Affects the input's padding and height. - sm/small: 32px - md/medium: 42px (default) - lg/large: 52px | `"large" \| "lg" \| "md" \| "medium" \| "sm" \| "small"` | `'medium'` | | `warning` | `warning` | A boolean indicating whether the date picker is in a warning state with yellow border color. | `boolean` | `undefined` | ## SignetDatePicker Events | Event | Description | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | `dateChange` | An event emitter that fires when the selected date changes | `CustomEvent` | | `dateError` | An event emitter that fires when an invalid date is entered. It emits an error object containing details about the invalid input. | `CustomEvent<{ message: string; invalidDate: string; field: "date"; timestamp: Date; }>` | | `handleBlur` | This event is emitted when the input element of the date picker loses focus. It can be used to perform actions or handle events when the date picker is no longer in focus. | `CustomEvent` | | `handleFocus` | This event is emitted when the input element of the date picker gains focus. It can be used to perform actions or handle events when the date picker is focused, such as showing a calendar or changing the input format. | `CustomEvent` | ## Dependencies ### Depends on - [signet-icon](../signet-icon) ### Graph ```mermaid graph TD; signet-date-picker --> signet-icon style signet-date-picker fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- *Built with Signet Design System*