vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动

直接上成品

代码

<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: '450px' }":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 "@/utils/calendar.js";
export default {name: "beOnDuty",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() {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--;this.defaultDate = new Date(this.year,this.month + this.cont,this.nowDay);this.setMinMaxDay();this.getNowDuty();},// 当前月下一个月arrowRight() {this.cont++;this.defaultDate = new Date(this.year,this.month + this.cont,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: $bgcolor;.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: $mainTone;}}}}.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: $mainTone !important;}}}}}.remind {li {background-color: $bgcolor0;display: flex;justify-content: space-between;.remind-left,.remind-right {text-align: left;}}}
}
</style>

vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动相关推荐

js实现日历框上一日下一日_一日三项令人兴奋的Lucene功能
js实现日历框上一日下一日昨天是富有成效的一天:突然,Lucene有了三个令人兴奋的新功能. 表达式模块昨天提交的第一个功能是新的expressions模块 . 这使您可以使用任意String表达 ...
Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月
在网上找了一个vant 日历改造的文章vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动_李泽举的博客-CSDN博客_vant日历添加农历感谢作者! 经改造后可以正常运行,但测 ...
vue element || vant 日历加农历、节日、节气，周六日改变颜色
前言 vue项目里产品要求实现日历加农历.节日.节气,周六日改变颜色 ,文章里会举两个例子(element and vant ) ,仔细看完就明白是怎么回事了一.vant日历 UI图如下 vant原 ...
php自动获取节气对应的年月日_php如何通过日期获取农历、节日、节气？
php如何通过日期获取农历.节日.节气? 发布时间:2020-05-21 11:57:28 来源:亿速云阅读:229 作者:Leah php如何通过日期获取农历.节日.节气?这篇文章运用了实例代码展 ...
php获取农历、节日、节气
1 /* 2 * 农历节气节日 3 * edit: www.jbxue.com 4 */ 5 header("Content-Type:text/html;charset=utf-8&q ...
监听element-ui的Calendar 日历组件的上一月今天下一月
监听element-ui的Calendar 日历组件的上一月今天下一月直接在mounted(){}里面进行监听代码如下: mounted() {let prevBtn = document.q ...
js获取当前月、上一月和下一月
获得当前月: function getNowMonth() {var date = new Date();var year = date.getFullYear();var month = date. ...
vue 获取上一年今年下一年上一月本月下一月昨天今天明天
年月日用vue moment获取时间 index.vue <template><div><div><a-button @click="getB ...
时任上海来伊份互联网事业群总裁王戈钧：传统企业（线上+线下）移动互联网改造...
2017年12月22日-23日,第13届信息化领袖峰会暨2017中国数字化贡献人物颁奖盛典在上海盛大开幕.本次峰会由上海市经济和信息化委员会指导,上海市国有资产信息中心.上海市计算机用户协会.上海市信 ...

vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动

直接上成品

代码

vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动相关推荐

最新文章

热门文章