# ef-datetime-field

A form control element for datetime input.

## Attributes

| Attribute         | Type      | Description                            |
|-------------------|-----------|----------------------------------------|
| `icon-has-action` | `boolean` | Specify when icon need to be clickable |
| `maxlength`       | `number`  | Set character max limit                |
| `minlength`       | `number`  | Set character min limit                |

## Properties

| Property        | Attribute         | Type             | Default | Description                                      |
|-----------------|-------------------|------------------|---------|--------------------------------------------------|
| `amPm`          | `am-pm`           | `boolean`        | false   | Overrides 12hr time display format               |
| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
| `formatOptions` |                   |                  | null    | Set the datetime format options based on<br />https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat<br />`formatOptions` overrides `timepicker` and `showSeconds` properties.<br />Note: time-zone is not supported |
| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
| `max`           | `max`             | `string \| null` | null    | Set maximum date.<br />This value must follow the `format` and be greater<br />than or equal to the value of the `min` attribute |
| `maxLength`     |                   | `number \| null` | null    | Set character max limit                          |
| `min`           | `min`             | `string \| null` | null    | Set minimum date.<br />This value must follow the `format` and be less<br />than or equal to the value of the `max` attribute |
| `minLength`     |                   | `number \| null` | null    | Set character min limit                          |
| `pattern`       |                   | `string`         | ""      | Set regular expression for input validation      |
| `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
| `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
| `showSeconds`   | `show-seconds`    | `boolean`        | false   | Toggle to display the seconds                    |
| `timepicker`    | `timepicker`      | `boolean`        | false   | Toggle to display the time picker                |
| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
| `value`         | `value`           | `string`         | ""      | Current date time value                          |
| `valueAsDate`   |                   |                  |         | Returns the value of the element, interpreted as Date |
| `valueAsNumber` |                   | `number`         |         | Returns the value of the element, interpreted as double number |
| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |

## Methods

| Method          | Type                                        | Description                                      |
|-----------------|---------------------------------------------|--------------------------------------------------|
| `checkValidity` | `(): boolean`                               | Returns true if an input element contains valid data. |
| `willUpdate`    | `(changedProperties: PropertyValues): void` | Updates the element<br /><br />**changedProperties**: Properties that has changed |

## Events

| Event           | Description                         |
|-----------------|-------------------------------------|
| `error-changed` | Dispatched when error state changes |
| `icon-click`    | Dispatched when icon is clicked     |
| `value-changed` | Dispatched when value changes       |