https://github.com/tuhe32/vue-jLunar-datePicker
VUE chinese-lunar date-picker component with festivals and solar terms
https://github.com/tuhe32/vue-jLunar-datePicker
Last synced: 7 months ago
JSON representation
VUE chinese-lunar date-picker component with festivals and solar terms
- Host: GitHub
- URL: https://github.com/tuhe32/vue-jLunar-datePicker
- Owner: tuhe32
- License: mit
- Created: 2017-09-16T03:45:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-07T05:47:50.000Z (about 5 years ago)
- Last Synced: 2025-05-09T20:50:12.960Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.3 MB
- Stars: 59
- Watchers: 2
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue-jlunar,日期选择器 - 具有节日和节气的中国月球拣选器组件. (UI组件 / 日历)
- awesome-vue - vue-jlunar-datepicker - VUE chinese-lunar date-picker component with festivals and solar terms ` 📝 7 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-jlunar-datepicker ★25 - A Chinese lunar datepicker component with festivals and solar terms. (UI Components / Calendar)
- awesome-vue - vue-jlunar-datepicker - A Chinese lunar datepicker component with festivals and solar terms. (Components & Libraries / UI Components)
- awesome-vue - vue-jlunar-datepicker - A Chinese lunar datepicker component with festivals and solar terms. (UI Components / Calendar)
README
# vue-jLunar-datePicker
@JinWen
> Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms.
# Online demo
* [enjoy the demo](https://tuhe32.github.io/vue-jLunar-datePicker/)
### Getting Start
---
**New for 2.0**
1、add a new Property :
type : DATE/DATERANGE (you can pick a period of time by use DATERANGE option)
2、fixed bugs
**Install**
`npm install vue-jlunar-datepicker --save`
**Usage**
main.js
```vue
import Vue from 'vue';
import JDatePicker from 'vue-jlunar-datepicker';
Vue.component("j-date-picker",JDatePicker);
```
test.vue
```vue
export default{
data(){
return{
data:{
value1:'',
type:'DATE',
showLunarClass:'MIX',
showBackYears:2,
showLunarIcon:true,
showLunarControl:true,
width1:'300',
format:'YYYY.MM.DD',
placeholder:'please input something ...',
rangeSeparator:'-',
disabled:false,
editable:true,
clearable:true,
pickerOptions: {
disabledDate (time) {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}
}
```
### API
---
**Attributes**
| Properties | Description | Type | Optional value | Default value |
| :---------------- | :--------------------------------------- | :------ | :------------ | :------------ |
| value | bind-value(v-model) | String,Date,Array | -- | -- |
| width | width | String | -- | 200px/200 |
| type |you can pick a day or pick a period of time | String | DATE/DATERANGE | DATE |
| showLunarClass | The display type of a lunar date; case insensitive; | String | FULLLUNAR/LUNAR/NUMBER/MIX| NUMBER|
| showLunarIcon | whether to show lunar icon | Boolean | true/false | false |
| showBackYears | the years number after now based on the current year | Number | -- | 2 |
| format | format Date | String | -- | YYYY-MM-DD |
| showLunarControl | whether to show the lunar control by default | Boolean | true/false | true |
| editable | whether to input your date int the component | Boolean | true/false | false |
| placeholder | placeholder for component | String | -- | -- |
| clearable | whether to show the clear button | Boolean | true/false | true |
| disabled | whether to disable this component | Boolean | true/false | false |
| rangeSeparator | date separator | String | -- | '-' |
| picker-options | refer to the following | object | -- | {} |
**picker-options**
| Properties | Description | Type | Optional value | Default value |
| :---------------- | :--------------------------------------- | :------ | :------------ | :------------ |
| disabledDate | Set disable date.Parameter is current date.you should return Boolean .Like examples! | Function | -- | -- |
**event**
| event name | Description | return |
| :---------------- | :--------------------------------------- | :------ |
| change | When the input value changes return the value | value |
**GitHub**
https://github.com/tuhe32/vue-jLunar-datePicker
**OSChina**
https://gitee.com/tuhe32/vue-jLunar-datePicker
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).