VUE集成日历组件（带农历、节日、节气）

先上效果图：

 

 

 废话不多说，直接上操作：

①vue目录下安装插件

npm install vue-jlunar-datepicker --save

②main.js中导入

import JDatePicker from 'vue-jlunar-datepicker';

Vue.component("j-date-picker",JDatePicker);

③VUE界面代码

<template>
    <j-date-picker v-model="value1"
         :width="width1"
         :placeholder="placeholder"
         :picker-options="pickerOptions"
         :rangeSeparator="rangeSeparator"
         :disabled="disabled"
         :showLunarClass="showLunarClass"
         :showLunarControl="showLunarControl"
         :type="type"
         :showBackYears="showBackYears"
         :showLunarIcon="showLunarIcon"
         :format="format">
    </j-date-picker>
</template>
<script>
export default{
  data(){
    return{
      data:{
        value1:'',
        type:'DATE',
        showLunarClass:'MIX',
        showBackYears:2,
        showLunarIcon:true,
        showLunarControl:true,
        width1:'300',
        format:'YYYY.MM.DD',
        placeholder:'查看日期请点我',
        rangeSeparator:'-',
        disabled:false,
        editable:true,
        clearable:true,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
      }
    }
  }
}
</script>

 到此完美结束！

ps:附自定义属性表：