Extended Date Time Range Picker
Basic usage
Bind a variable to v-model.
Change the input format
Uses date-fns library formatting.
Change the relative parts
Using the relativeDateParts prop the list of relative parts from/ago can be adjusted
Ranges
Using the presetRanges prop the list of quick ranges can be adjusted
Inline
Component can be displayed in inline mode using inline prop
Attributes
Inherits attributes of VcDatetimeRangePicker
Table Title
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | v-model binding | Object | { from: Date | null, to: Date | null } | { from: null, to: null } |
| inputValueFormat | In which format the value will be displayed in input | string | - | MM/dd/yyyy, hh:mm |
| relativeDateParts | Which options will be generated for relative dropdown selection | string[] | 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds' | ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'] |
| presetRanges | When configured, it will provide a button with tooltip of configured range that user can select | Array | { label: string, range: { from: Date | string, to: Date | string } } | [] |
| inline | When passed true, the element will be displayed in inline mode | Boolean | true | false | false |