Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hc200ok/vue-easy-range-date-picker
An easy-to-use range date picker component made with Vue.js 2.x
https://github.com/hc200ok/vue-easy-range-date-picker
datepicker daterangepicker rangedatepicker vue vue-component vue2 vuejs2
Last synced: 3 days ago
JSON representation
An easy-to-use range date picker component made with Vue.js 2.x
- Host: GitHub
- URL: https://github.com/hc200ok/vue-easy-range-date-picker
- Owner: HC200ok
- License: mit
- Created: 2019-10-29T14:45:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T08:51:16.000Z (over 1 year ago)
- Last Synced: 2024-11-06T04:47:55.697Z (8 days ago)
- Topics: datepicker, daterangepicker, rangedatepicker, vue, vue-component, vue2, vuejs2
- Language: Vue
- Homepage:
- Size: 1.15 MB
- Stars: 5
- Watchers: 2
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-easy-range-date-picker
> A simple and easy-to-use range date picker based on Vue2
# Installation
```bash
npm install --save vue-easy-range-date-picker
```
# Usage
```js
import RangeDatePicker from 'vue-easy-range-date-picker';
export default {
components: {
RangeDatePicker,
},
data() {
return {
dates: {
start: 1572879600000,
end: 1575730800000
},
};
},
}
```
# Demo
[](https://codesandbox.io/s/dates-with-start-and-end-kgm6v?file=/src/App.vue)
# 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:
```js
// example
dates: {
start: 1573052400000,
end: 1574434800000
}
```
you can also pass an empty object as the default value like this:
```js
import RangeDatePicker from 'vue-easy-range-date-picker';
export default {
components: {
RangeDatePicker,
},
data() {
return {
dates: {},
};
},
}
```
[](https://codesandbox.io/s/initial-empty-dates-wso98o?file=/src/App.vue)
(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
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```