damienroche/vue-mj-daterangepicker

🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)

vue-mj-daterangepicker

Installation

You need Vue.js version 2.0+.

1 Install via npm

npm install vue-mj-daterangepicker
yarn add vue-mj-daterangepicker

2 Import and use

import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'

...

Vue.use(DateRangePicker)

Props

Name	Type	Default	Description
locale	String	en	set the locale ['de', 'es', en', 'fr', 'ru']
from	String	null	ISO-8601 date of start range
to	String	null	ISO-8601 date of end range
begin	String	null	ISO-8601 date to display since beginning range
allowFrom	String	null	ISO-8601 date to disable selection of all dates before (strict)
allowTo	String	null	ISO-8601 date to disable selection of all dates after (strict)
past	Boolean	true	allow/disallow user to select past dates
future	Boolean	true	allow/disallow user to select future dates
panel	String	null	choose which panel to be open by default
panels	Array	[ 'range', 'week', 'month', 'quarter', 'year' ]	choose which panels to be available
yearsCount	Number	2	number of past/future years to display in year panel
showControls	Boolean	true	show bottom controls
theme	Object	see customize section	customize colors
width	String	'auto'	set component width
resetTitle	String	'Reset'	change Reset button title
submitTitle	String	'Submit'	change Submit button title
presets	Object	see preset section	select which presets to be available
rangeDisplayed	String	'to'	select which range is visible when calendar is displayed

Customize

theme = {
  primary: '#3297DB',
  secondary: '#2D3E50',
  ternary: '#93A0BD',
  border: '#e6e6e6',
  light: '#ffffff',
  dark: '#000000',
  hovers: {
    day: '#CCC',
    range: '#e6e6e6'
  }
}

Presets

available presets : ['custom', 'today', 'yesterday', 'tomorrow', 'last7days', 'next7days', 'last30days', 'next30days', 'last90days', 'next90days', 'last365days', 'next365days', 'forever']

warning: forever need begin props to be set.

Events

This datepicker emit three events, @update, @select and @reset

@update is triggered when submit button is clicked. @select is triggered when a range is selected, can be useful if you don't want to show bottom controls (with showControls = false) @reset is triggered when reset button is clicked

All return an object with the start and end date, plus the active panel

{
  to: '2019-04-23T10:26:00.996Z',
  from: '2018-04-23T10:26:00.996Z'
  panel: 'range'
}

Examples

<template>
  <date-range-picker :from="$route.query.from" :to="$route.query.to" :panel="$route.query.panel" @update="update"/>
</template>

<script>

export default {
  methods: {
    update(values) {
      this.$router.push({ query: Object.assign({}, this.$route.query, {
        to: values.to,
        from: values.from,
        panel: values.panel
      }) })
    }
  }
}
</script>