Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weifeiyue/vue-datepicker-local
A Beautiful Datepicker Component For Vue2
https://github.com/weifeiyue/vue-datepicker-local
component datepicker javascript vue
Last synced: about 2 months ago
JSON representation
A Beautiful Datepicker Component For Vue2
- Host: GitHub
- URL: https://github.com/weifeiyue/vue-datepicker-local
- Owner: weifeiyue
- License: mit
- Created: 2017-10-10T07:55:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:54:26.000Z (almost 2 years ago)
- Last Synced: 2024-06-23T04:57:25.020Z (3 months ago)
- Topics: component, datepicker, javascript, vue
- Language: Vue
- Homepage: https://weifeiyue.github.io/vue-datepicker-local/
- Size: 1.13 MB
- Stars: 297
- Watchers: 11
- Forks: 84
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-datepicker-local
### A Beautiful Datepicker Component For Vue2
* Lightweight (less than 5kb minified and gzipped)
* Only dependencies Vue
* Beautiful!
## Demo
[https://weifeiyue.github.io/vue-datepicker-local/](https://weifeiyue.github.io/vue-datepicker-local/)
## Usage
### Install
```bash
$ npm install vue-datepicker-local
```
### ES6
```html
import VueDatepickerLocal from 'vue-datepicker-local'
export default {
components: {
VueDatepickerLocal
},
data () {
return {
time: new Date()
}
}
}
```
### Browser globals
The `dist` folder contains `vue-datepicker-local.js` and `vue-datepicker-local.css`.
```html
new Vue({
el: "#app",
data: {
time: new Date()
}
})
```
### Props
| Prop | Description | Type | Default |
|:---------------|:-------------------------------------------------|:-----------|:-------------------|
| v-model | dates to be manipulated | Date/Array | -- |
| name | name for input | String | -- |
| type | type for input (inline/normal) | String | normal |
| inputClass | custom class name for input | String | -- |
| popupClass | custom class name for popup | String | -- |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| clearable | clear the date | Boolean | false |
| rangeSeparator | range separator | String | "~" |
| format | to set the date format | String | "YYYY-MM-DD" |
| local | the local of the DatePicker | Object | {
dow: 1, // Monday is the first day of the week
hourTip: '选择小时', // tip of select hour
minuteTip: '选择分钟', // tip of select minute
secondTip: '选择秒数', // tip of select second
yearSuffix: '年', // format of head
monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of head
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panel
weeks: '一_二_三_四_五_六_日'.split('_'), // weeks
cancelTip: '取消', // default text for cancel button
, submitTip: '提交' // default text for submit button
} |
| disabledDate | specify the date that cannot be selected | Function | (time, format)=>{return false} |
| showButtons | show Cancel/Submit buttons | Boolean | false |
| placeholder | placeholder of Input | String | -- |
### Events
| Event Name | Description | Parameters |
|:---------------|:-------------------------------------------------|:-------------------------------------|
| confirm |triggers when user confirms | the value component's binding value |
| cancel |triggers when user click the cancel button | -- |
| clear |triggers when user click the clear button | -- |
## License
vue-datepicker-local is licensed under [The MIT License](LICENSE).