移动端Vant中的Calendar日历增加显示农历(节日、节气)功能

本文主要是介绍移动端Vant中的Calendar日历增加显示农历(节日、节气)功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

核心： 使用 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%;"
/>