Essentials
Time picker
Add hours and minutes to a date or a range.
Set withTimePicker. After you choose a date, the calendar swaps to an hour list and a minute list.
Bound value
<FunctionalCalendar v-model="value" is-date-picker with-time-picker />
The time picker does not open with isMultipleDateRange, and those ranges hold plain dates without a time.
Where the time lives
| Mode | Time in the value |
|---|---|
| Single date | selectedHour, selectedMinute and selectedDateTime |
| Range | The time is part of dateRange.start and dateRange.end, as d/m/yyyy hh:mm |
| Multiple dates | hour and minute on each entry of selectedDates |
Keyboard
Each list is a listbox. Use ArrowUp and ArrowDown to move, Home and End to jump to the ends, and Enter or Space to choose a value. The close button and the Escape key return to the calendar.
Props
| Prop | Use |
|---|---|
displayTimeInput | Add the time to the text of a single date input. |
dateFormat | A time part such as hh:mm. The valid forms are HH:MM, HH:mm, hh:MM and hh:mm. |
activeHours | Hours users can pick, from 0 to 23. |
activeMinutes | Minutes users can pick, from 0 to 59. |
For a range, click the start or the end date at the top of the picker to choose which one you edit.