README
Vuetify2 daterange picker
I need to better customize Vuetify daterange picker and use it with Vuetify version 2.x
Table of Contents
Requirements
You must have a Vuetify 2.x. You probably already have them if you are on this page. However, if you have not installed them, you can do so by doing.
yarn add vuetify
You also need to have date-fns for the component to work. It is required for date manipulation, formatting and all things related to dates. It is great because it supports code splitting and tree shaking and adds minimal baggage to the component.
yarn add date-fns
When you install @ac-codeprod/vuetify2-daterange-picker, the peer dependencies warning should point that out for you.
Installation & Usage
Installation
yarn add @ac-codeprod/vuetify2-daterange-picker
Usage
// If you wanna use it in components, please import necessary files as shown above
<template>
<v-daterange v-model="range"></v-daterange>
</template>
<script>
import { VDaterange } from '@ac-codeprod/vuetify2-daterange-picker'
import '@ac-codeprod/vuetify2-daterange-picker/dist/vuetify2-daterange-picker.css'
export default {
components: { VDaterange },
data() {
return {
range: {}
}
}
}
</script>
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
dark
Description: Applies the dark theme variant to the component.
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.
Default: An empty array.
no-presets
Description: Turn off display of presets.
Default: false
separator-label
Description: The text that shows up in the input placeholder in-between start and end dates.
Default: 'To'
min
Description: he 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'
first-day-of-week
Description: Sets the first day of the week, starting with 0 for Sunday.
Default: 0
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: ''
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.
Default: {}
Note: Some props like readonly , placeholder, disabled and value cannot be overridden using values in this prop.
menu-props
Description: An object containing all the props that Vuetify's Menu supports. This helps you customise the menu as you wish.
Default: {}
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',
key: 'customize'
}
menu-closed
Description: When the date picker menu is closed.
Event Data: undefined
Slots
title
Description: Content passed to this slot becomes the activator of the card in which the date picker opens. If it is present, the provided content is rendered inside
activator
Description: Content passed to this location becomes the activator to open Vuetify2 daterange picker. If present, the content provided is rendered in the