# xpl-input-date ### Design Tokens Tokens used by this component from `@xplortech/apollo-foundation`. **Color** - `--xpl-border-negative` — error state border color ## Properties | Property | Attribute | Description | Type | Default | | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | | `dateFormat` | `date-format` | The date format to use for the datepicker input. This is used by flatpickr to format the date. Default is 'Y-m-d' (e.g., 2023-10-01). See https://flatpickr.js.org/formatting/ for more details. | `string` | `'Y-m-d'` | | `disabled` | `disabled` | Whether the field is disabled | `boolean` | `undefined` | | `inputId` | `input-id` | The `inputId` is used to associate the input with a label. | `string` | `undefined` | | `max` | `max` | Maximum value for the input. | `number \| string` | `undefined` | | `min` | `min` | The minimum value for the input. | `number \| string` | `undefined` | | `mode` | `mode` | For datepicker inputs, whether to allow only a single date or a range of dates. (Multiple non-consecutive dates planned to be supported in the future.) | `"range" \| "single"` | `'single'` | | `name` | `name` | Most inputs are used in forms, and should have a `name` associated with the input for handling form data. Applies to all input types. | `string` | `undefined` | | `placeholder` | `placeholder` | Placeholder text that appears when the field has no value Applies to text, password, number, and date inputs. | `string` | `undefined` | | `post` | `post` | A string (recommended max 3 characters) that gets shown visually to the left of (before) the input. | `string` | `undefined` | | `pre` | `pre` | A string (recommended max 8 characters) that gets shown visually to the right of (after) the input. | `string` | `undefined` | | `readonly` | `readonly` | Whether the input is editable | `boolean` | `undefined` | | `required` | `required` | Whether the input is required | `boolean` | `undefined` | | `value` | `value` | Including a `value` will pre-populate the input with the given string. | `string` | `undefined` | ## Events | Event | Description | Type | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | | `hasErrorStateChanged` | Event that is emitted when the hasErrorState state changes. | `CustomEvent` | | `rangeSelected` | Event that emits the selected date range when the mode is 'range'. The emitted value is an object with `start` and `end` properties. | `CustomEvent<{ start: Date; end: Date; }>` | | `valueChange` | Event that emits the current value of the input | `CustomEvent` | ## Dependencies ### Used by - [xpl-input](..) ### Depends on - [xpl-icon](../../xpl-icon) ### Graph ```mermaid graph TD; xpl-input-date --> xpl-icon xpl-input --> xpl-input-date style xpl-input-date fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*