Skip to content
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Branch: master
Clone or download
Latest commit 8994558 Mar 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook add storybook Feb 20, 2019
img init readme Feb 20, 2019
public init Feb 18, 2019
src update translation Feb 24, 2019
.gitignore init Feb 18, 2019
.postcssrc.js init Feb 18, 2019
README.md Fixed typo on readme Mar 18, 2019
babel.config.js init Feb 18, 2019
package.json add tomorrow to preset Feb 20, 2019
tsconfig.json create simple date range picker Feb 19, 2019
tslint.json create simple date range picker Feb 19, 2019
yarn.lock add tomorrow to preset Feb 20, 2019

README.md

vue-mj-daterangepicker

Size Limit example

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 ['en', 'fr]
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
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
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

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 two events, @reset and @update both 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>
You can’t perform that action at this time.