# ef-datetime-picker

Control to pick date and time

## Properties

| Property               | Attribute                 | Type                             | Default       | Description                                      |
|------------------------|---------------------------|----------------------------------|---------------|--------------------------------------------------|
| `amPm`                 | `am-pm`                   | `boolean`                        | false         | Toggles 12hr time display                        |
| `clears`               | `clears`                  | `boolean`                        | false         | Show clears button                               |
| `disabled`             | `disabled`                | `boolean`                        | false         | Set disabled state                               |
| `duplex`               | `duplex`                  | `"" \| "consecutive" \| "split"` | null          | Display two calendar pickers.                    |
| `error`                | `error`                   | `boolean`                        | false         | Set error state                                  |
| `filter`               |                           | `DatetimePickerFilter \| null`   | null          | Custom filter, used for enabling/disabling certain dates |
| `firstDayOfWeek`       | `first-day-of-week`       | `number \| undefined`            |               | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
| `format`               | `format`                  | `string`                         | "dd-MMM-yyyy" | Set the datetime format<br />Based on date-fns formats (https://date-fns.org/) |
| `inputDisabled`        | `input-disabled`          | `boolean`                        | false         | Disable input part of the picker                 |
| `inputTriggerDisabled` | `input-trigger-disabled`  | `boolean`                        | false         | Only open picker panel when calendar icon is clicked.<br />Clicking on the input will no longer open the picker. |
| `max`                  | `max`                     | `string`                         | ""            | Set maximum date                                 |
| `min`                  | `min`                     | `string`                         | ""            | Set minimum date                                 |
| `opened`               | `opened`                  | `boolean`                        | false         | Toggles the opened state of the list             |
| `placeholder`          | `placeholder`             | `string`                         | "dd-MMM-yyyy" | Set placeholder text default depends on format   |
| `popupDisabled`        | `popup-disabled`          | `boolean`                        | false         | Disable the popup                                |
| `preventCloseOnSelect` | `prevent-close-on-select` | `boolean`                        | false         | Prevents the Picker from closing on date selection.<br />Note that if timepicker is true, the picker will remain open regardless of this flag. |
| `range`                | `range`                   | `boolean`                        | false         | Set to switch to range select mode               |
| `readonly`             | `readonly`                | `boolean`                        | false         | Set readonly state                               |
| `showSeconds`          | `show-seconds`            | `boolean`                        | false         | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
| `timepicker`           | `timepicker`              | `boolean`                        | false         | Toggle to display the time picker                |
| `value`                | `value`                   | `string`                         | ""            | Current date time value                          |
| `values`               | `values`                  | `string[]`                       | []            | Set multiple selected values                     |
| `view`                 | `view`                    | `string`                         | ""            | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
| `views`                |                           | `string[]`                       | []            | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
| `warning`              | `warning`                 | `boolean`                        | false         | Set warning state                                |
| `weekdaysOnly`         | `weekdays-only`           | `boolean`                        | false         | Only enable weekdays                             |
| `weekendsOnly`         | `weekends-only`           | `boolean`                        | false         | Only enable weekends                             |

## Methods

| Method               | Type       | Description                                      |
|----------------------|------------|--------------------------------------------------|
| `updateCalendarSlot` | `(): void` | Request to update slot on the calendar while the overlay is open |
| `validateInput`      | `(): void` | Validates the input, marking the element as invalid if its value does not meet the validation criteria. |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `error-changed`  | Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
| `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
| `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |
| `view-changed`   | Fired when the user changes view in calendar e.g. change to next month view. The event is not triggered if `view` property is changed programmatically. |

## Slots

| Name              | Description                                      |
|-------------------|--------------------------------------------------|
| `footer`          | Slot to add custom contents at the bottom of popup |
| `from-yyyy-MM-dd` | Slot to add custom contents on any date cells of left calendar in `duplex` mode e.g. `from-2023-01-01`. Use `from-yyyy` or `from-yyyy-MM` if the cell is year or month |
| `header`          | Slot to add custom contents at the top of popup  |
| `left`            | Slot to add custom contents at the left of popup |
| `right`           | Slot to add custom contents at the right of popup |
| `to-yyyy-MM-dd`   | Slot to add custom contents on any date cells of right calendar in `duplex` mode e.g. `to-2023-01-01`. Use `to-yyyy` or `to-yyyy-MM` if the cell is year or month |
| `yyyy-MM-dd`      | Slot to add custom contents on any date cells e.g. `2023-01-01`. Use `yyyy` or `yyyy-MM` if the cell is year or month. |