核心: 使用 js-calendar-converter 库实现
npm地址:js-calendar-converter
内部使用原生calendar.js, 中国农历(阴阳历)和西元阳历即公历互转JavaScript库,具体实现感兴趣的可自行查看其实现源码。
原日历效果图:
更改后日历效果图:
核心代码如下:
在main.js文件中引入js-calendar-converter
,并挂在到Vue上,代码如下:
// vant 日历显示农历
import calendar from 'js-calendar-converter';
Vue.prototype.$calendar = calendar;
组件代码:
<van-calendartype="range"v-model="dateRangeShow":default-date="dateRange":min-date="minDate":max-date="maxDate":formatter="formatterCode":poppable="false"color="#2873eb":show-title="false":allow-same-day="true"@confirm="onConfirm"
/>
js代码(代码里禁用日期功能和农历显示无关,可根据需求自行决策是否需要):
formatterCode(day) {const _time = new Date(day.date);// 禁用日期const times = _time.getTime();const cur = new Date().getTime();if (times > cur) {day.type = 'disabled';}const y = _time.getFullYear();const m = _time.getMonth() + 1;const d = _time.getDate(); // 从 Date 对象返回一个月中的某一天 (1 ~ 31)const info = this.$calendar.solar2lunar(y, m, d); // $calendar 已在全局注册绑定// 优先级:节日>节气>农历if (info.festival != null && info.festival != '') {day.bottomInfo = info.festival;day.className = 'festival'; //添加颜色样式} else if (info.Term != null && info.Term != '') {day.bottomInfo = info.Term;day.className = 'term'; //添加颜色样式} else if (info.IDayCn != null && info.IDayCn != '') {day.bottomInfo = info.IDayCn;}return day;
}
css代码(样式也可以根据自己需求进行自定义样式):
// 日历农历周末显示样式
.festival > div.van-calendar__bottom-info,
.term > div.van-calendar__bottom-info{color: #c80000;
}
拓展:web端ElementUI中的 DatePicker 日期选择器增加农历显示功能
使用 vue-jlunar-datepicker 依赖插件实现即可,具体样式可以自己根据需求进行修改处理。
代码简示:
// 日期控件替换为带农历的日期控件
import JDatePicker from "vue-jlunar-datepicker";
Vue.component("j-date-picker", JDatePicker);
<j-date-pickerv-model="dayDate"type="date"placeholder="选择日期"show-lunar-class="FULLLUNAR":show-lunar-control="true":show-back-years="2":show-lunar-icon="true"format="yyyy-MM-dd":picker-options="pickerOptions":clearable="false"style="width:100%;"
/>
相关学习资料地址:vue-jlunar-datepicker插件npm地址