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

核心: 使用 js-calendar-converter 库实现

npm地址:js-calendar-converter

内部使用原生calendar.js, 中国农历(阴阳历)和西元阳历即公历互转JavaScript库,具体实现感兴趣的可自行查看其实现源码。

原日历效果图:
移动端Vant中的Calendar日历增加显示农历(节日、节气)功能_第1张图片

更改后日历效果图:

移动端Vant中的Calendar日历增加显示农历(节日、节气)功能_第2张图片
核心代码如下:

在main.js文件中引入js-calendar-converter,并挂在到Vue上,代码如下:

// vant 日历显示农历
import calendar from 'js-calendar-converter';
Vue.prototype.$calendar = calendar;

组件代码:

<van-calendar
  type="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-picker
	v-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地址

你可能感兴趣的:(vue,节日,前端,Vant,日历农历,Calendar)