基于vue2.0和elementUi的vue农历日期组件vue-jlunar-datepicker（插件）

vue-jlunar-datepicker（插件）

vue实现农历日历插件——vue-jlunar-datepicker插件

这个插件本身是基于vue2.0和elementUi框架来实现的。

安装 vue-jlunar-datepicker 插件

npm install vue-jlunar-datepicker --save
// 如果安装过程中，出现报错，一般在终端中会显示出来解决办法
// 我这边确实报错了，提示的信息是elementUi版本不兼容的问题，解决方法就是：
npm install vue-jlunar-datepicker --save --force

插件在main.js中引入并注册 或组件中引入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JDatePicker from 'vue-jlunar-datepicker';
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.component("j-date-picker",JDatePicker);
new Vue({
  render: h => h(App)
}).$mount('#app')

或者
<script>
import JDatePicker from 'vue-jlunar-datepicker'
export default {
    components: {
        JDatePicker
    }
}
</script>

使用

<template>
    <div class="contentViews">
        <j-date-picker 
			v-model="form.birthdaydate" 
			style="width: 100%" 
            :placeholder="placeholder"
        	:picker-options="pickerOptions" 
            :rangeSeparator="rangeSeparator" 
			@change="onDateChange"
        	:disabled="disabled" 	
            :showLunarClass="showLunarClass" 
            :showLunarControl="showLunarControl" 
            :type="type"
        	:showBackYears="showBackYears" 
            :showLunarIcon="showLunarIcon" 
            :format="format">
        </j-date-picker>
    </div>
</template>
<script>
export default {
    data() {
        return {
            form: {
                birthdaydate: 'L2023-02-21',
            },
            type: 'DATERANGE', // DATE/DATERANGE
            showLunarClass: 'MIX', // FULLLUNAR/LUNAR/NUMBER/MIX 农历日期的显示类型；不区分大小写；
            showBackYears: 2, // 现在之后的年份数基于当前年份
            showLunarIcon: true,
            showLunarControl: true, // 是否默认显示农历
            width1: '300',
            format: 'YYYY/MM/DD',
            placeholder: '请选择日期',
            rangeSeparator: '-',
            disabled: false,
            editable: true,
            clearable: true,
            pickerOptions: {
                disabledDate(time) {
                    console.log(time);
                    return time.getTime() < Date.now() - 8.64e7;//这行代码是限制当前日期之前不可选择，如果注释掉，则不做限制
                }
            }
        };
    },
    methods: {
        onDateChange(val) {
            this.form.birthdaydate = val;
            this.$forceUpdate();
        }
    }
};
</script>
<style lang="less" scoped>
::v-deep.icon-richeng:before {
    content: '>';
}

/deep/.full-jcalendar__body {
    height: 240px !important;
}

/deep/.full-jcalendar .input__inner:focus {
    border-color: #f90;
}

.full-jcalendar .input__inner:hover {
    border-color: #ffcb7c;
}

/deep/.full-jcalendar__body .data-list li:hover {
    background-color: #f90;
}

/deep/.full-jcalendar-header {
    height: 30px;
    background: #ffeacb;
}

/deep/.full-jcalendar__body {
    border: 1px solid #ebebeb;
}

/deep/.full-jcalendar-header label {
    display: inline-block !important;
}

/deep/.full-jcalendar .input__inner,
/deep/input::input-placeholder {
    font-size: 13px !important;
    color: #999 !important;
}

/deep/.full-jcalendar__body .day-cell.select,
/deep/.full-jcalendar__body .data-list li.select-year {
    background-color: #f90;
}

/deep/.day-cell.today.select .number.is-today.is-empty {
    color: #fff !important;
}

/deep/.day-cell.today .number.is-today.is-empty {
    color: #f90 !important;
}

/deep/.full-jcalendar__body .day-cell.today:before,
/deep/.full-jcalendar__body .data-list li.curr-year::before {
    border-top: 0.5em solid #f90 !important;
}

/deep/.full-jcalendar-header .title-year:hover,
/deep/.full-jcalendar-header .title-month:hover {
    color: #f90 !important;
}

/deep/.full-jcalendar__main {
    width: 100% !important;
}

/deep/.iconfont.icon-richeng::before {
    content: '' !important;
}

/deep/.icon.iconfont.icon-xiangyoujiantou::before {
    content: '>' !important;
}

/deep/.icon.iconfont.icon-xiangzuojiantou::before {
    content: '<' !important;
}

/deep/.day-number>.lunar {
    font-size: 11px !important;
}

/deep/.day-cell {
    line-height: 18px !important;
}
</style>