vue-jlunar-datepicker (plug-in)
Vue implements the lunar calendar plug-in-vue-jlunar-datepicker plug-in
The plug-in itself is implemented based on
vue2.0
the and framework.elementUi
Install vue-jlunar-datepicker plug-in
npm install vue-jlunar-datepicker --save
// 如果安装过程中,出现报错,一般在终端中会显示出来解决办法
// 我这边确实报错了,提示的信息是elementUi版本不兼容的问题,解决方法就是:
npm install vue-jlunar-datepicker --save --force
Plug-ins main.js
are introduced and registered in or introduced in components
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>
use
<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>