vue+js纯手写日历（包含农历，节假日）

vue+js纯手写日历（包含农历，节假日）
使用的js 地址 dataChange.js
插件使用了elementui

//完整代码
<template><div><div class="dateBox"><!-- 存放日期选择器和返回按钮 --><div><span class="checkDateBox"><el-date-pickerv-model="dateData"format="yyyy-MM"value-format="yyyy-MM"type="month"placeholder="选择月"@change="dateChange"></el-date-picker></span><span class="backBtn"><el-button type="primary" @click="currentTime">返回当前时间</el-button></span></div><div class="faceplate"><!-- 存放星期的容器 --><div class="box"><divclass="timeBox"v-for="(item, index) in weekList":key="index":style="index == 5 || index == 6 ? 'color:#dc9514' : 'color:#fff'">{{ item.tit }} <span>{{ item.en }}</span></div></div><!-- 存放日历面板的容器 --><div class="box"><divclass="timeBoxNum"v-for="(item, index) in dataList":key="index":style="item.type == 2? 'background: #e4e7ed;': intraday == item.day && item.nowYear == 1&&item.type ==1? 'background: pink': 'background: #fff'"@click="timeClick(index)"><div class="tiemStr">{{ item.day }}</div><div class="tiemStr" style="margin-bottom:5px" v-if="item.ChineseCalendar.Term !=null">{{item.ChineseCalendar.Term}}</div><div class="tiemStr" style="margin-bottom:5px" v-else-if="item.ChineseCalendar.IDayCn == '初一'">{{item.ChineseCalendar.IMonthCn}}</div><div class="tiemStr" style="margin-bottom:5px" v-else>{{item.ChineseCalendar.IDayCn}}</div><div class="tiemStr">{{ item.pullText }}</div><div class="tiemStr">{{ item.explain }}</div></div></div></div></div><el-dialogtitle="编辑日历":visible.sync="dialogVisible"width="50%":before-close="handleClose"><div><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm":label-position="labelPosition"><el-form-item label="选择当前日期类型" prop="selectValue"><el-selectv-model="ruleForm.selectValue"placeholder="请选择活动区域"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="请输入需要说明的内容" prop="details"><el-input type="textarea" v-model="ruleForm.details"></el-input></el-form-item></el-form></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="tijiao">确 定</el-button></span></el-dialog></div></template><script>import calendarFormatter from "@/utils/dataChange";export default {data() {return {intraday: "", //当天intraMonth: "", //当月nowYear: "", //当年activeIndex: null, //点击了哪个日期，在她上面添加信息labelPosition: "top", //表单标题对其方式dialogVisible: false,options: [{value: "工作日",label: "工作日",},{value: "休息日",label: "休息日",},],ruleForm: {selectValue: "", //下拉选中的值details: "", //多行输入框的数据}, //表单数据dateData: "", //选择的具体日期dataList: [], //日历面板数据weekList: [{tit: "星期一",en: "MON",},{ tit: "星期二", en: "TUN" },{ tit: "星期三", en: "WEN" },{ tit: "星期四", en: "THU" },{ tit: "星期五", en: "FRI" },{ tit: "星期六", en: "SAT" },{ tit: "星期日", en: "SUN" },],rules: {selectValue: [{ required: true, message: "请选择当前日期类型", trigger: "blur" },],},};},methods: {// 确定处理数据事件submitForm() {this.dialogVisible = false;this.dataList[this.activeIndex].pullText = this.ruleForm.selectValue;this.dataList[this.activeIndex].explain = this.ruleForm.details;},// 表单的提交tijiao() {this.$refs["ruleForm"].validate((valid) => {if (valid) {this.submitForm();} else {return false;}});},// 点击日期弹层出现timeClick(index) {this.activeIndex = index;this.dialogVisible = true;},//时间的切换dateChange() {this.dataList = [];this.getDays(this.dateData);},// 获取某年某月的天数getDays(indate) {// let indate = "2022-07";var timeData = indate + "-01";var year = parseInt(indate.split("-")[0]);var month = parseInt(indate.split("-")[1]);//run nianvar isrun = false;if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) isrun = true;switch (month) {case 2:if (isrun) {this.returnDetialDay(timeData, 29);return 29;} else {this.returnDetialDay(timeData, 28);return 28;}case 1:case 3:case 5:case 7:case 8:case 10:case 12:this.returnDetialDay(timeData, 31);return 31;default:this.returnDetialDay(timeData, 30);return 30;}},// 返回某天是星期几 --- 前面需要加几天returnDetialDay(val, day) {var y = val.substring(0, 4),m = val.substring(5, 7),newM = m >= 10 ? m - 1 : val.substring(6, 7) - 1; //为了获取前一个月的最后一天数据 小于10月的会有补0需要判断处理var lastDay = new Date(y, newM, 0); //某年月的最后一天 中国标准时间格式var newlastDay = lastDay.getDate(); //转化为具体数字格式// val 传入的格式： 2022-07-06let timeArr = val.split("-");var myDate = new Date();myDate.setFullYear(timeArr[0], Number(timeArr[1]) - 1, timeArr[2]);var week = myDate.getDay();let obj = {year: y, //选中的年份month:m,//选中的月份text: "", // 选中月第一天是周几start: null, //选中月前面展示上月的天数end: null, // 选中月后面展示下月的天数time: val.substring(0, 7), //选中的年月格式lastDay: newlastDay, //选中月 上一个月份的最后一天day: day,};if (week == 0) {obj.text = "周日";obj.start = 6;obj.end = 42 - 6 - day;} else if (week == 1) {obj.text = "周一";obj.start = 0;obj.end = 42 - 0 - day;} else if (week == 2) {obj.text = "周二";obj.start = 1;obj.end = 42 - 1 - day;} else if (week == 3) {obj.text = "周三";obj.start = 2;obj.end = 42 - 2 - day;} else if (week == 4) {obj.text = "周四";obj.start = 3;obj.end = 42 - 3 - day;} else if (week == 5) {obj.text = "周五";obj.start = 4;obj.end = 42 - 4 - day;} else if (week == 6) {obj.text = "周六";obj.start = 5;obj.end = 42 - 5 - day;}this.panelDate(obj);},panelDate(textobj) {//  上一月展示的天数let minnum = textobj.lastDay - textobj.start + 1;for (var i = minnum; i <= textobj.lastDay; i++) {let obj = {year:textobj.month == '01'? textobj.year -1:textobj.year,//展示日期的年month:textobj.month == '01'?12:textobj.month-1,//展示日期的月pullText: "", //下拉选中  例如工作日explain: "", //说明day: i, //多少号type: 2, //是否是本月 1为是   2为上个月或下个月  3为不是本月nowYear: 2,};this.dataList.push(obj);}//  本月展示的天数for (var j = 1; j <= textobj.day; j++) {let obj = {year:textobj.year,//展示日期的年month:textobj.month,//展示日期的月pullText: "", //下拉选中  例如工作日explain: "", //说明day: j, //多少号type: this.intraMonth == textobj.month?1:3, //是否是本月 1为是   2为上个月或下个月  3为不是本月nowYear: this.nowYear == textobj.year ? 1 : 2,};this.dataList.push(obj);}//   下月展示的天数for (var t = 1; t <= textobj.end; t++) {let obj = {year:textobj.month == '12'? textobj.year*1 +1 : textobj.year,//展示日期的年month:textobj.month == '12'?'01':textobj.month*1+1,//展示日期的月pullText: "", //下拉选中  例如工作日explain: "", //说明day: t, //多少号type: 2, //是否是本月 1为是   2为上个月或下个月 3为不是本月nowYear: 2,};this.dataList.push(obj);}// console.log("时间数据", textobj, this.dataList);for(var f = 0 ; f < this.dataList.length; f++){let item = this.dataList[f]this.dataList[f].ChineseCalendar = calendarFormatter.solar2lunar(item.year, item.month, item.day)}console.log("时间数据", this.dataList);},// 监测弹出层是否关闭handleClose() {this.dialogVisible = false;this.$refs["ruleForm"].resetFields();this.ruleForm = {selectValue: "", //下拉选中的值details: "", //多行输入框的数据};},currentTime() {var date = new Date();let year = date.getFullYear(); //获取完整的年份(4位)let m = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)this.intraday = new Date().getDate(); // 当前天this.nowYear = year;this.dataList = [];let newM = m < 10 ? "0" + m : m;this.dateData = year + "-" + newM;this.intraMonth = newM //当月this.getDays(this.dateData);},},mounted() {this.currentTime();},};</script><style lang="less" scoped>.dateBox {width: 80%;border: 1px solid #ccc;margin: 0 auto;}.checkDateBox {display: inline-block;width: 200px;}.backBtn {float: right;}.faceplate {margin-top: 20px;}.box {text-align: center;margin: 0 auto;}.timeBox {display: inline-block;width: 13%;background: blue;height: 40px;line-height: 40px;text-align: center;color: #fff;border-left: 1px solid pink;box-sizing: border-box;vertical-align: text-top;}.timeBox:nth-child(7) {border-right: 1px solid pink;}.timeBoxNum {display: inline-block;width: 13%;background: #fff;height: 150px;text-align: center;color: black;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 0px 10px;box-sizing: border-box;cursor: pointer;vertical-align: text-top;}.timeBoxNum:nth-child(7n) {border-right: 1px solid #ccc;}.tiemStr {display: block;text-align: left;color: black;}</style>

vue+js纯手写日历（包含农历，节假日）相关推荐

纯JS+CSS手写日历
介绍今天带来一个纯JS+css手写的日历, 一开始先显示当前日期,比如下方25日就是当前日期会有较深蓝色背景色,鼠标指着的日期是下方图片14日的淡蓝色背景色上面显示日期,可左右选择上个月或者下个月 ...
【JS 纯手写轮播图代码】
轮播图实现首先需要在同级目录下创建img文件夹,用以储存你需要轮播的图片,注意设置好图片的宽度,以免出现空白区域.然后就可以愉快地实现轮播功能啦~ // An highlighted block & ...
vue纯手写思维导图，拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动后续增加功能点:添加.删除先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
纯手写SpringFramework-完结版（原创）
个人简介作者是一个来自河源的大三在校生,以下笔记都是作者自学之路的一些浅薄经验,如有错误请指正,将来会不断的完善笔记,帮助更多的Java爱好者入门. 文章目录个人简介纯手写SpringFrame ...
IOS纯手写代码支持旋屏
2019独角兽企业重金招聘Python工程师标准>>> 不用ib纯手写代码实现旋屏效果,xcode4.6.3,今天试了一下,可以做到,但是代码量会增加,基本思路是:在 - (void ...
【手写系列】纯手写实现一个高可用的RPC
前言在实际后台服务开发中,比如订单服务(开发者A负责)需要调用商品服务(开发者B负责),那么开发者B会和A约定调用API,以接口的形式提供给A.通常都是B把API上传到Maven私服,然后B开始写A ...
【手写系列】纯手写实现JDK动态代理
前言在Java领域,动态代理应用非常广泛,特别是流行的Spring/MyBatis等框架.JDK本身是有实现动态代理技术的,不过要求被代理的类必须实现接口,不过cglib对这一不足进行了有效补充.本 ...
JS的手写TRIM函数
JS的手写TRIM函数转载于:https://www.cnblogs.com/vibratea/archive/2009/07/24/1530109.html

vue+js纯手写日历（包含农历，节假日）

vue+js纯手写日历（包含农历，节假日）相关推荐

最新文章

热门文章