# vue-jLunar-datePicker **Repository Path**: tuhe32/vue-jLunar-datePicker ## Basic Information - **Project Name**: vue-jLunar-datePicker - **Description**: 极简式基于vue2.0的中文农历日期组件(支持展示农历,节日,节气) - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 113 - **Forks**: 42 - **Created**: 2017-11-28 - **Last Updated**: 2025-05-23 ## Categories & Tags **Categories**: vue-extensions **Tags**: None ## README # vue-jLunar-datePicker @JinWen > Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. ![demo](./static/DEMO.png) # 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 ``` ### 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).