vue-easy-range-date-picker
A simple range datepicker based on Vue2
Installation
npm install --save vue-easy-range-date-picker
Demo
Usage
ES6 Modules
import RangeDatePicker from 'vue-easy-range-date-picker';
<range-date-picker v-model="dates"/>
Props API
| Props | Type | Required | Default |
|---|---|---|---|
| v-model(1) | Object | yes | - |
| language(2) | String | no | 'zh' |
| colorToday(3) | String | no | '#41b883' |
| colorSelected(3) | String | no | '#34495e' |
| colorActive(3) | String | no | '#41b883' |
(1) v-model: Bind to an Object data to store the result of dates you selected:
dates:
{
start: 1573052400000, // example
end: 1574434800000 // example
}
Suggestion: using parseTime function provided in /src/util.js to convert the timestamp to specific format like '2019-11-3'
(2) language: Now supporting Chinese('zh'), Japanese('jp'), English('en')
(3) See how to use: Try!
Events
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
90 Jul 21, 2022
498 Dec 4, 2022
54 Dec 13, 2021
300 Dec 13, 2022
769 Dec 29, 2022
216 Jul 8, 2022
28 Nov 23, 2022
828 Dec 26, 2022
68 Nov 12, 2022
2 Aug 31, 2022
706 Nov 21, 2022
2.6k Jan 3, 2023
13 Nov 24, 2022
100 Oct 1, 2022
86 Dec 1, 2022
101 Nov 21, 2022
160 Dec 23, 2022
34 Dec 14, 2022