
<!-- Auto Generated Below -->


## SignetDateRangePicker Properties

| Property                | Attribute                 | Description                                                                                                                                                                                                   | Type                                                     | Default        |
| ----------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------------- |
| `autoFillEndDate`       | `auto-fill-end-date`      | A boolean indicating whether the end date should be automatically filled with the start date when a start date is selected                                                                                    | `boolean`                                                | `false`        |
| `clearable`             | `clearable`               | A boolean indicating whether to show clear button                                                                                                                                                             | `boolean`                                                | `false`        |
| `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 range 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`    |
| `endDate`               | `end-date`                | The end date of the date range in string format (e.g., 'MM/DD/YYYY')                                                                                                                                          | `string`                                                 | `undefined`    |
| `endDateLabel`          | `end-date-label`          | The label for the end date input field                                                                                                                                                                        | `string`                                                 | `"End Date"`   |
| `error`                 | `error`                   | A boolean indicating whether the date range picker is in an error state with red border color.                                                                                                                | `boolean`                                                | `undefined`    |
| `locale`                | `locale`                  | The locale for formatting the dates (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 range picker is required and a colored asterisk will be shown in the labels.                                                                                                                | `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 range picker inputs. 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'`     |
| `startDate`             | `start-date`              | The start date of the date range in string format (e.g., 'MM/DD/YYYY')                                                                                                                                        | `string`                                                 | `undefined`    |
| `startDateLabel`        | `start-date-label`        | The label for the start date input field                                                                                                                                                                      | `string`                                                 | `"Start Date"` |
| `warning`               | `warning`                 | A boolean indicating whether the date range picker is in a warning state with yellow border color.                                                                                                            | `boolean`                                                | `undefined`    |


## SignetDateRangePicker Events

| Event         | Description                                                                                                                                                                                                               | Type                                                                                                       |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `changeEvent` | An event emitter that fires when the selected start or end date changes. It emits an object containing the startDate and endDate values                                                                                   | `CustomEvent<{ startDate: string; endDate: string; }>`                                                     |
| `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: "startDate" \| "endDate"; timestamp: Date; }>` |
| `handleBlur`  | An event emitter that fires when the date range picker loses focus.                                                                                                                                                       | `CustomEvent<FocusEvent>`                                                                                  |
| `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<FocusEvent>`                                                                                  |


## Dependencies

### Used by

 - [datagrid-filter-date-range](../datagrid-filters)

### Depends on

- [signet-icon](../signet-icon)

### Graph
```mermaid
graph TD;
  signet-date-range --> signet-icon
  datagrid-filter-date-range --> signet-date-range
  style signet-date-range fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with Signet Design System*