Vuetify Date Range Picker

Date Range Picker component build with Vuetify, optimized for best mobile and desktop user experience.

• Install
• Usage
• Props
• Events

Install

npm install @nerd305/vuetify-date-range-picker

import DateRangePicker from '@nerd305/vuetify-date-range-picker'

export default {
  // ...
  components: {
    DateRangePicker
  }
  // ...
}

Usage

<date-range-picker :namespace="datePickerStores" :config="configuration" @change="setDateRange" />

example configuration using last 30 days preset and compare to previous period:

<script>
  import { datePickerStores } from '@nerd305/vuetify-date-range-picker'
  import { presets } from '@nerd305/vuetify-date-range-picker'

  const configuration = {
    dark: false,
    compare: true,
    dateFormat: 'MMM Do, YYYY',
    dateStart: presets.LAST_30_DAYS[0],
    dateUntil: presets.LAST_30_DAYS[1],
    compareStart: presets.PREVIOUS_PERIOD[LAST_30_DAYS][0],
    compareUntil: presets.PREVIOUS_PERIOD[LAST_30_DAYS][1],
    primaryPreset: LAST_30_DAYS,
    comparePreset: PREVIOUS_PERIOD
  }

</script>

Available props

| Prop | Type | Default | Description | | ----------- | ------ | ------------- | ---------------------------------------------- | | config | Object | configuration | Date format of the DateRangePicker | | namespace | String | none | DateRangePicker Pinia Store | | storeNames | Array | none | Array of Date formats for the DateRangePicker |

| Object property | Type | Default | Description | | --------------- | ------- | --------------- | ------------------------------------------------------------------------ | | dark | Boolean | false | dark theme for DateRangePicker | | compare | Boolean | false | turn on/off comare period | | dateFormat | String | MM-DD-YYYY | Date format of the DateRangePicker | | dateStart | STRING | DAYS_AGO_7 | 7 days ago | | dateUntil | STRING | TODAY | today | | compareStart | STRING | DAYS_AGO_15 | 7 prior days from dateStart | | compareUntil | STRING | DAYS_AGO_8 | 7 prior days from dateuntil | | primaryPreset | STRING | LAST_WEEK | constant name representing last week | | comparePreset | STRING | PREVIOUS_PERIOD | constant name representing previous 7 days from primary preset selection |

Events

These events are emitted on actions in the datepicker

| Event | Output | Description | | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------- | | change | Object | Date Range Picker date range selections, selected preset, comparison period, as described in above configuration object | | opened | Boolean | emits true if the component is engaged and false when not |

Date formatting

String formatter

Should be parsing and using date string format as in moment package.

| Token | Desc | Example | | ----- | ---------------------- | ----------- | | d | day | 1 | | dd | 0 prefixed day | 01 | | D | abbr day | Mon | | su | date suffix | st, nd, rd | | M | month number (1 based) | 1 (for Jan) | | MM | 0 prefixed month | 01 | | MMM | abbreviated month name | Jan | | MMMM | month name | January | | yy | two digit year | 16 | | yyyy | four digit year | 2016 |

Presets

Static presets

Used for primary date range selection

• LAST_WEEK
• LAST_MONTH
• LAST_7_DAYS
• LAST_30_DAYS

Computed presets

Used for compare date range selection based on primary date range selection

• PREVIOUS_PERIOD
• PREVIOUS_YEAR