@pluzchat/date-range-picker
v1.1.8
Published
a simple range datepicker developed by vue
Downloads
9
Maintainers
Readme
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