女孩学网站开发与运营方向怎么样,如何修改网站模板,免费ppt,机票便宜网站建设核心#xff1a; 使用 js-calendar-converter 库实现
npm地址#xff1a;js-calendar-converter
内部使用原生calendar.js#xff0c; 中国农历#xff08;阴阳历#xff09;和西元阳历即公历互转JavaScript库#xff0c;具体实现感兴趣的可自行查看其实现源码。
原日…核心 使用 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-calendartyperangev-modeldateRangeShow:default-datedateRange:min-dateminDate:max-datemaxDate:formatterformatterCode:poppablefalsecolor#2873eb:show-titlefalse:allow-same-daytrueconfirmonConfirm
/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-modeldayDatetypedateplaceholder选择日期show-lunar-classFULLLUNAR:show-lunar-controltrue:show-back-years2:show-lunar-icontrueformatyyyy-MM-dd:picker-optionspickerOptions:clearablefalsestylewidth:100%;
/相关学习资料地址vue-jlunar-datepicker插件npm地址
