Date Time Range Picker
Built based on @vuepic/vue-datepicker
Basic usage
Bind a variable to v-model.
Range Picker
Range picker mode
Preset Ranges
When configured, it will provide a sidebar with configured range that user can select
(range prop must be enabled)
Error and Disabled States
error message
Inline Mode
Removes the input field and places the calendar in your parent component
Attributes
Table Title
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | v-model binding | Single picker: Date | string. Range picker: [Date, Date] | [string | string] | — | null |
| applyButton | Text for Apply Button | string | - | Apply |
| autoApply | If set to true, clicking on a date value will automatically select the value | Boolean | true | false | false |
| enableSeconds | Enable seconds in the time picker | Boolean | true | false | false |
| enableTimePicker | Enable or disable time picker | Boolean | true | false | false |
| error | Text of error | string | - | - |
| disabled | Whether the component is disabled | boolean | — | false |
| format | Format the value of the date(s) in the input field (Ex: dd-MM-yyyy HH:mm:ss) | string | (params: Date | Date[]) => string | Single picker: 'MM/dd/yyyy HH:mm' | Range picker: 'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm' | |
| id | Uid for input (set id like 'dp-input-{uid}') | string | - | - |
| inline | Removes the input field and places the calendar in your parent component | Boolean | true | false | false |
| label | Label text | string | - | - |
| label-icon | Label icon | string | - | - |
| locale | Set datepicker locale. Datepicker will use built in javascript locale formatter to extract month and weekday names | string | - | en-US |
| maxDate | All dates after the given date will be disabled | Date | string | - | null |
| maxWidth | max-width property | string | - | 100% |
| minDate | All dates before the given date will be disabled | Date | string | - | null |
| placeholder | Placeholder | string | - | - |
| presetRanges | When configured, it will provide a sidebar with configured range that user can select (range prop must be enabled) | Array [{ label: string; range: Date[] | string[] }] | - | [] |
| range | Range picker mode | Boolean | true | false | false |
| required | Adding (*) to label | boolean | — | false |
| teleport | Set teleport target | string | - | body |
| utc | Output date(s) will be in UTC timezone string. You can use this if you gather dates from different timezones and want to send the date directly to the server | Boolean | true | false | false |
| weekStart | Day from which the week starts. 0-6, 0 is Sunday, 6 is Saturday | number | string | - | 1 |
| hideBorder | To hide the border of calendar | Boolean | true | false | false |