Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月

在网上找了一个vant 日历改造的文章vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动_李泽举的博客-CSDN博客_vant日历添加农历

感谢作者！经改造后可以正常运行，但测试后发现一个问题：

今天是2022年11月30号，点击到2023年2月的时候，发现并不是2月，而是2023年3月，错误如下所示：

到2023年2月份显示错误了，因为2023年2月份有28天，我们传入的天数是30天，超出了2月份最大天数，所以出错了。修改的代码如下：

    arrowRight() {this.cont++;const days = this.getMonthDays(this.year, this.month + this.cont)this.defaultDate = new Date(this.year,this.month + this.cont,this.nowDay > days ? days : this.nowDay  //在此处修改);this._setMinMaxDay();// this.getNowDuty();},

全部源码如下：

<template><div class="be-on-duty"><!--nav--><!-- <van-nav-bar title="值班" left-text="返回" class="nav" :fixed="true"><template #left><i class="icon-home" @click="goHome()"></i></template></van-nav-bar> --><!--calendar--><div class="calendar mb-10"><van-calendarref="calendars":poppable="false":show-confirm="false":default-date="defaultDate":style="{ height: '500px' }":formatter="formatter":min-date="minDate":max-date="maxDate"></van-calendar><van-icon name="arrow-left" @click="arrowLeft" /><van-button type="danger" @click="goNow">回今天</van-button><van-icon name="arrow" @click="arrowRight" /></div><!--remind--><!-- <ul class="remind"><liclass="mt-10 pt-10 pb-10"v-for="(item, index) in dutyList":key="index"><div class="remind-left"><span class="remind-left ml-15 mr-15">{{ item.dutyDateShow }}</span><span>{{ item.dutyWeek }}</span></div><divclass="remind-right":style="{ color: item.dutyPeriod == '白班' ? '#F8960B' : '#027DB4' }"><span class="mr-15">●</span><span class="mr-20">{{ item.dutyPeriod }}</span></div></li></ul> --></div>
</template><script>
// import { queryDutySchedule } from "@/api/system/beOnDuty";
import { calendar } from "js-calendar-converter";
import { Calendar, Button, Icon } from "vant";
export default {name: "beOnDuty",components: {VanCalendar: Calendar,VanButton: Button,VanIcon: Icon,},data() {return {minDate: new Date(),maxDate: new Date(),defaultDate: new Date(),dutyList: [],cont: 0,year: new Date().getFullYear(),month: new Date().getMonth(),nowDay: new Date().getDate(),};},created() {// this.getNowDuty();this._setMinMaxDay();},methods: {// 返回首页goHome() {},// 回到今天goNow() {this.defaultDate = new Date();this.minDate = new Date();this.maxDate = new Date();this.cont = 0;this._setMinMaxDay();// this.getNowDuty();},_setMinMaxDay() {this.showYear = this.defaultDate.getFullYear();this.showMonth = this.defaultDate.getMonth();var firstDay = new Date(this.defaultDate);firstDay.setDate(1);this.minDate = new Date(this.showYear,this.showMonth,firstDay.getDate());var endDay = new Date(this.showYear, this.showMonth + 1, 1);endDay.setDate(0);this.maxDate = new Date(this.showYear, this.showMonth, endDay.getDate());},// 设置显示月份可选择的天数区间setMinMaxDay() {var firstDay = new Date(this.defaultDate);firstDay.setDate(1);this.minDate = new Date(this.year,this.month + this.cont,firstDay.getDate());var endDate = new Date(this.defaultDate);endDate.setMonth(this.defaultDate.getMonth() + 1);endDate.setDate(0);this.maxDate = new Date(this.year,this.month + this.cont,endDate.getDate());},// 当前月上一个月arrowLeft() {this.cont--;const days = this.getMonthDays(this.year, this.month + this.cont)this.defaultDate = new Date(this.year,this.month + this.cont,this.nowDay > days ? days : this.nowDay);this._setMinMaxDay();// this.getNowDuty();},getMonthDays(year, month) {let days = new Date(year, month + 1, 0).getDate();return days;},// 当前月下一个月arrowRight() {this.cont++;const days = this.getMonthDays(this.year, this.month + this.cont)this.defaultDate = new Date(this.year,this.month + this.cont,this.nowDay > days ? days : this.nowDay);this._setMinMaxDay();// this.getNowDuty();},getNowDuty() {// var y = this.defaultDate.getFullYear();// var m = this.defaultDate.getMonth() + 1;// m = m < 10 ? "0" + m : m;// const obj = {//   month: y + "-" + m,// };// queryDutySchedule(obj).then((res) => {//   this.dutyList = res.data;// });},// Vant日历日期添加法定节假日以及24节气formatter(day) {const _time = new Date(day.date);const y = _time.getFullYear();const m = _time.getMonth() + 1;const d = _time.getDate();const w = _time.getDay();const info = calendar.solar2lunar(y, m, d);//   改变周六周日显示颜色if (w === 0 || w === 6) {day.className = "weekendRed";}// var mm = m;// mm = m < 10 ? "0" + m : m;// var dd = d;// dd = d < 10 ? "0" + d : d;// var nowDate = y + "-" + mm + "-" + dd;// this.dutyList.forEach((item) => {//   if (item.dutyDate == nowDate) {//     if (item.dutyPeriod == "白班") {//       day.topInfo = "白";//     } else if (item.dutyPeriod == "夜班") {//       day.topInfo = "夜";//     }//   }// });//   优先级:节日>节气>农历if (info.festival != null && info.festival != "") {day.bottomInfo = info.festival;} else if (info.Term != null && info.Term != "") {day.bottomInfo = info.Term;} else if (info.IDayCn != null && info.IDayCn != "") {day.bottomInfo = info.IDayCn;}return day;},},
};
</script><style scoped lang="scss">
// @import "@/assets/style/variables.scss";
::v-deep.be-on-duty {background-color: gray;// .icon-home {//   display: block;//   width: 1.0625rem;//   height: 1.125rem;//   background: url(../../../assets/image/icon_home.png) no-repeat center;//   background-size: 100%;// }.calendar {.van-button--danger {height: 1.475rem;padding: 0.3125rem;position: absolute;top: 3.4rem;right: 4rem;}.van-icon-arrow {position: absolute;top: 3.6rem;right: 1.2rem;font-size: 1.3rem;}.van-icon-arrow-left {position: absolute;top: 3.6rem;left: 1.2rem;font-size: 1.3rem;}.van-calendar {.van-calendar__header {.van-calendar__header-subtitle {font-size: 1rem;}.van-calendar__weekdays {:nth-child(1),:nth-child(7) {color: red;}}}}.van-calendar__body {.van-calendar__month {.van-calendar__days {.van-calendar__day {font-size: 1.125rem;.van-calendar__top-info {padding-right: 0.625rem;text-align: right;}}.weekendRed {color: red !important;}}}}}.remind {li {background-color: red;display: flex;justify-content: space-between;.remind-left,.remind-right {text-align: left;}}}
}
</style>

注意：记得安装获取农历的一个插件 npm i js-calendar-converter

Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月相关推荐

vant 日历组件优化
vant日历组件优化 vant组件现状 min-date 如果不设置默认当前日期 max-date 如果不设置当前日期的六个月后目的:这个组件这么设置的目的就是为了节省性能公司需求 min-dat ...
关于element的日历组件改造为考勤页面
关于利用element-ui实现考勤页面前言:因为在实际开发中想要实现员工考勤页面,但是element-ui的日历组件,没有提供相关功能,因此自己实现一个 <el-calendar :firs ...
sql 新增加一列序号_取出上一条下一条的 sql语句
在开发中,很多公司用的ID为自增的,上一条下一条的获取方法不在此类,一般如 select * from tablename where id select * from tablename where ...
vant日历组件van-calendar默认时间的坑
<van-cell title="选择日期区间" :value="date" @click="showDate = true" /&g ...
vue 把组件挂载到视图_vue.js中，在一个vue组件中，想通过点击按钮，才加载另外一个目标vue组件，要怎么实现？...
展开全部 { data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } } Vue.js( ...
记：使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档第一个问题: 边界留白就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
Vue手写一个日历组件
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下. 先来看看设计图是什么样式, 跟其他日历有点不一样,这个 ...
vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动
直接上成品代码 <template><div class="be-on-duty"><van-nav-bar tit ...
Vant组件库封装可翻页日历组件
前言我们在进行VUE开发的时候有的时候会使用到VantUI组件库: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home#jie-shao Vant ...

Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月

Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月相关推荐

最新文章

热门文章