Date Range Picker component build with Vuetify, optimized for best mobile and desktop user experience.
npm install @nerd305/vuetify-date-range-pickerimport DateRangePicker from "@nerd305/vuetify-date-range-picker"
export default {
// ...
components: {
DateRangePicker,
},
// ...
}<date-range-picker :config="configuration" @change="setDateRange" />example configuration using last 30 days preset and compare to previous period:
<script>
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>| Prop | Type | Default | Description |
|---|---|---|---|
| config | Object | configuration | Date format of 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 |
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 |
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 |
Used for primary date range selection
- LAST_WEEK
- LAST_MONTH
- LAST_7_DAYS
- LAST_30_DAYS
Used for compare date range selection based on primary date range selection
- PREVIOUS_PERIOD
- PREVIOUS_YEAR
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent