@pluzchat/date-range-picker

vue-easy-range-date-picker

A simple and easy-to-use range date picker based on Vue2

Installation

npm install --save date-range-picker

Usage

<template>
  <date-range-picker v-model="dates"/>
</template>

<script>
import DateRangePicker from 'date-range-picker';

export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      dates: {
        start: 1572879600000,
        end:  1575730800000
      },
    };
  },
}
</script>

Demo

Props

Props	Type	Required	Default
v-model(1)	Object	yes	null
language(2)	String	no	'zh'
colorToday(3)	String	no	'#41b883'
colorSelected(3)	String	no	'#34495e'
colorActive(3)	String	no	'#41b883'

(1) v-model: Binding an object which contains start timestamp and end timestamp:

// example
dates: {
  start: 1573052400000,
  end: 1574434800000
}

you can also pass an empty object as the default value like this:

<template>
  <RangeDatePicker v-model="dates"/>
</template>

<script>
import RangeDatePicker from 'vue-easy-range-date-picker';

export default {
  components: {
    RangeDatePicker,
  },
  data() {
    return {
      dates: {},
    };
  },
}
</script>

(2) Now supporting Chinese('zh'), Japanese('jp'), English('en')

(3)

Event

closePicker event will be emitted when both the start date and end date are selected.

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build