@nerd305/vuetify-date-range-picker
Version:
Vuetify Date Range Picker with compare period and presets, optimized for best mobile and desktop user experience
121 lines (91 loc) • 4.62 kB
Markdown
# Vuetify Date Range Picker
Date Range Picker component build with Vuetify, optimized for best mobile and desktop user experience.
- [Install](#installation)
- [Usage](#usage)
- [Props](#available-props)
- [Events](#events)
## Install
```bash
npm install @nerd305/vuetify-date-range-picker
```
```javascript
import DateRangePicker from '@nerd305/vuetify-date-range-picker'
export default {
// ...
components: {
DateRangePicker
}
// ...
}
```
## Usage
```html
<date-range-picker :namespace="datePickerStores" :config="configuration" @change="setDateRange" />
```
example configuration using last 30 days preset and compare to previous period:
```html
<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