API

Props, Events & Slots

Props

value

Description: The start and end values of the picker.

Default: An object having start and end values set to today in YYYY-MM-DD format if the prop is undefined. If an empty object is passed however, the start and end values will be empty strings. If the passed object contains start and end values in YYYY-MM-DD format, the picker is initialised to that range.

disabled

Description: if true , disables the input that opens date picker menu.

Default: false

start-label

Description: The text that shows up in the input placeholder for start date when no range is selected.

Default: 'Start Date'

end-label

Description: The text that shows up in the input placeholder for end date when no range is selected.

Default: 'End Date'

preset-label

Description: The text that shows up as the heading of the list of presets.

Default: 'Presets'

presets

Description: A list of preset objects of the following form.

{
  label: 'Last 30 Days',
  range: [
    '2019-03-20', // start date
    '2019-03-20'  // end date
  ]
}

Default: An empty array.

separator-label

Description: The text that shows up in the input placeholder in-between start and end dates.

Default: 'To'

min

Description: The min selectable date in YYYY-MM-DD format. Same as the min prop for Vuetify's Date Picker.

Default: undefined

max

Description: The max selectable date in YYYY-MM-DD format. Same as the max prop for Vuetify's Date Picker.

Default: undefined

locale

Description: Sets the locale. Accepts a string with a BCP 47 language tag. Same as the locale prop for Vuetify's Date Picker.

Default: 'en-us'

no-title

Description: Same as the no-title prop for Vuetify's Date Picker.

Default: false

display-format

Description: The format in which the selected ranges should show up in the input.

Default: YYYY-MM-DD

highlight-color

Description: Vuetify color classes you want to apply to the highlighted dates in range. You can even supply your own class and style the highlight as you wish.

Default: 'blue lighten-5'

show-reset

Description: Shows a reset button in the date range dialog actions beside Cancel. This clicking on it resets the picker as well as it emits empty values for start and end.

Default: true

If you don't want to show a reset button and still wanna reset the picker programmatically, you can get a ref to the component and call the `reset()` method.

next-icon

Description: Same as next-icon prop for Vuetify's Date Picker.

Default: '$vuetify.icons.next'

prev-icon

Description: Same as prev-icon prop for Vuetify's Date Picker.

Default: '$vuetify.icons.prev'

input-props

Description: An object containing all the props that Vuetify's Text Field supports. This helps you customise the input as you wish including changing field styles such as outline or solo etc.

Note: Some props like readonly , placeholder, disabled and value cannot be overridden using values in this prop.

Default: {}

menu-props

Description: An object containing all the props that Vuetify's Menu supports. This helps you customise the menu as you wish.

Note: Some props like close-on-content-click , offset-y cannot be overridden using values in this prop.

Events

input

Description: Emitted every time a new range is applied.

Event Data: An object containing the selected start and end dates in YYYY-MM-DD format. Example:

{
  start: '2018-12-04',
  end: '2019-02-20'
}

menu-closed

Description: When the date picker menu is closed.

Event Data: undefined

Slots

title

Description: Content passed to this slot becomes the header of the card in which the date picker opens. If it is present, the provided content is rendered inside <v-card-title></v-card-title> component.