vue的h5日历组件实现详解
作者:小菜一枚(white)
这篇文章主要为大家详细介绍了vue的h5日历组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue的h5日历组件实现代码,供大家参考,具体内容如下
日历样式自定义
日历组件
<template> <section class="wh_container"> <div class="wh_content_all"> <div class="wh_top_changge"> <li @click="PreMonth(myDate,false)"> <div class="wh_jiantou1"></div> </li> <li class="wh_content_li">{{dateTop}}</li> <li @click="NextMonth(myDate,false)"> <div class="wh_jiantou2"></div> </li> </div> <div class="wh_content"> <div class="wh_content_item" v-for="(tag,index) in textTop" :key="index"> <div class="wh_top_tag">{{tag}}</div> </div> </div> <div class="wh_content"> <div class="wh_content_item" v-for="(item,index) in list" @click="clickDay(item,index)" :key="index" > <!-- <div class="wh_item_date" :class="item.isToday?'wh_isToday':item.isPreDay?'wh_chose_day':item.isChosedDay?'wh_chose_day':''" >{{item.id}}</div>--> <div class="wh_item_date" v-bind:class="[{ wh_isMark: item.isMark}, {wh_other_dayhide:item.otherMonth!=='nowMonth'}, {wh_want_dayhide:item.dayHide}, {wh_isToday:item.isToday}, {wh_chose_day:item.chooseDay},setClass(item)]" >{{item.id}}</div> </div> </div> </div> </section> </template> <script> import moment from "moment"; import timeUtil from "./calendar"; import Vue from "vue"; export default { data() { return { myDate: [], list: [], historyChose: [], dateTop: "", }; }, props: { rangeDate: { type: Array, default: () => [], }, markDate: { type: Array, default: () => [], }, markDateMore: { type: Array, default: () => [], }, textTop: { type: Array, default: () => ["一", "二", "三", "四", "五", "六", "日"], }, sundayStart: { type: Boolean, default: () => false, }, agoDayHide: { type: String, default: `0`, }, futureDayHide: { type: String, default: `2554387200`, }, }, created() { this.intStart(); // 获取今日的日期 var curDate = new Date(); var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 this.myDate = new Date(preDate); console.log(this.rangeDate); }, methods: { intStart() { timeUtil.sundayStart = this.sundayStart; }, setClass(data) { // console.log('data',data) let obj = {}; obj[data.markClassName] = data.markClassName; return obj; }, // 点击选择的日期 clickDay: function (item, index) { console.log("in", "kkkkkk", item); if (item.otherMonth === "nowMonth" && !item.dayHide) { console.log("in", "kkkkkk"); this.getList(this.myDate, item.date); } if (item.otherMonth !== "nowMonth") { item.otherMonth === "preMonth" ? this.PreMonth(item.date) : this.NextMonth(item.date); } }, // 选择月份 ChoseMonth: function (date, isChosedDay = true) { date = timeUtil.dateFormat(date); this.myDate = new Date(date); this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); if (isChosedDay) { this.getList(this.myDate, date, isChosedDay); } else { this.getList(this.myDate); } }, // 上一个月的切换 PreMonth: function (date, isChosedDay = true) { date = timeUtil.dateFormat(date); this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth"); this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); if (isChosedDay) { this.getList(this.myDate, date, isChosedDay); } else { this.getList(this.myDate); } }, // 下一个月的切换 NextMonth: function (date, isChosedDay = true) { date = timeUtil.dateFormat(date); this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth"); this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); if (isChosedDay) { this.getList(this.myDate, date, isChosedDay); } else { this.getList(this.myDate); } }, // 数据格式化的处理 forMatArgs: function () { let markDate = this.markDate; let markDateMore = this.markDateMore; let rangeDate = this.rangeDate; markDate = markDate.map((k) => { return timeUtil.dateFormat(k); }); rangeDate = rangeDate.map((k) => { return timeUtil.dateFormat(k); }); return [markDate, markDateMore, rangeDate]; }, // 日期表格的的样式初始化 getList: function (date, chooseDay, isChosedDay = true) { console.log(date, chooseDay, "listCanshu", this.rangeDate); const [markDate, markDateMore, rangeDate] = this.forMatArgs(); // 标签 this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`; // 顶部的头 let arr = timeUtil.getMonthList(this.myDate); // 获取当前日期的整个月份 for (let i = 0; i < arr.length; i++) { let markClassName = ""; let k = arr[i]; k.chooseDay = false; const nowTime = k.date; //当前遍历的哪个时间 const t = new Date(nowTime).getTime() / 1000; //看每一天的class for (const c of markDateMore) { if (c.date === nowTime) { markClassName = c.className || ""; } } //标记选中某些天 设置class k.markClassName = markClassName; k.isMark = markDate.indexOf(nowTime) > -1; if (this.rangeDate) { k.isMark = rangeDate.indexOf(nowTime) > -1; } //无法选中某天 k.dayHide = t < this.agoDayHide || t > this.futureDayHide; if (k.isToday) { this.$emit("isToday", nowTime); } // if(this.rangeDate.length){ // if(timeUtil.dateFormat(moment(this.rangeDate[0]).format("YYYY-MM-DD"))===nowTime || timeUtil.dateFormat(moment(this.rangeDate[6]).format("YYYY-MM-DD"))===nowTime){ // k.chooseDay = true; // }else{ // k.chooseDay = false; // } // } var curDate = new Date(); var preDate = Date.parse( new Date(curDate.getTime() - 24 * 60 * 60 * 1000) ); //前一天 const preDay = timeUtil.dateFormat( moment(preDate).format("YYYY-MM-DD") ); // 处理默认当月的的前一天是被选中 if (nowTime === preDay && !chooseDay && !this.rangeDate.length) { k.chooseDay = true; } else { k.chooseDay = false; } let flag = !k.dayHide && k.otherMonth === "nowMonth"; if (chooseDay && chooseDay === nowTime && flag) { this.$emit("choseDay", nowTime); this.historyChose.push(nowTime); console.log(this.historyChose); if (this.rangeDate.length) { k.chooseDay = false; } else { k.chooseDay = true; } } else if ( this.historyChose[this.historyChose.length - 1] === nowTime && !chooseDay && flag ) { console.log("进来这里了"); // 处理日月的切换 if (this.rangeDate.length) { k.chooseDay = false; } else { if (this.chooseDay) { k.chooseDay = true; } else { k.chooseDay = false; } } } } this.list = arr; }, }, mounted() { this.getList(this.myDate); }, watch: { rangeDate: { handler(val, oldVal) { this.getList(this.myDate); }, deep: true, }, markDate: { handler(val, oldVal) { this.getList(this.myDate); }, deep: true, }, markDateMore: { handler(val, oldVal) { this.getList(this.myDate); }, deep: true, }, agoDayHide: { handler(val, oldVal) { this.getList(this.myDate); }, deep: true, }, futureDayHide: { handler(val, oldVal) { this.getList(this.myDate); }, deep: true, }, sundayStart: { handler(val, oldVal) { this.intStart(); this.getList(this.myDate); }, deep: true, }, }, }; </script> <style scoped> @media screen and (min-width: 460px) { .wh_item_date:hover { background: #00baff; cursor: pointer; } } * { margin: 0; padding: 0; } .wh_container { max-width: 410px; margin: auto; } li { list-style-type: none; } .wh_top_changge { display: flex; } .wh_top_changge li { cursor: pointer; display: flex; color: #040b29; font-size: 18px; flex: 1; justify-content: center; align-items: center; height: 47px; } .wh_top_changge .wh_content_li { cursor: auto; flex: 2.5; } .wh_content_all { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; background-color: #ffffff; width: 100%; overflow: hidden; padding-bottom: 8px; border-radius: 10px; } .wh_content { display: flex; flex-wrap: wrap; padding: 0 3% 0 3%; width: 100%; justify-content: center; } .wh_content:first-child .wh_content_item_tag, .wh_content:first-child .wh_content_item { color: #ddd; font-size: 16px; } .wh_content_item, .wh_content_item_tag { font-size: 15px; width: 13.4%; text-align: center; color: #fff; position: relative; } .wh_content_item { height: 40px; } .wh_top_tag { width: 40px; height: 40px; line-height: 40px; margin: auto; display: flex; justify-content: center; align-items: center; color: #9b9da9; } .wh_item_date { width: 40px; height: 40px; line-height: 40px; margin: auto; display: flex; justify-content: center; align-items: center; color: #040b29; } .wh_jiantou1 { width: 12px; height: 12px; border-top: 2px solid #9b9da9; border-left: 2px solid #9b9da9; transform: rotate(-45deg); } .wh_jiantou1:active, .wh_jiantou2:active { border-color: #040b29; } .wh_jiantou2 { width: 12px; height: 12px; border-top: 2px solid #9b9da9; border-right: 2px solid #9b9da9; transform: rotate(45deg); } .wh_content_item > .wh_isMark { margin: auto; /* border-radius:10px; */ background:rgba(235, 246, 255, 1); z-index: 2; } .wh_content_item .wh_other_dayhide { color: #bfbfbf; } .wh_content_item .wh_want_dayhide { color: #9b9da9; } .wh_content_item .wh_isToday { /* background: #00BAFF; border-radius:10px; */ color: rgba(130, 183, 225, 1); } .wh_content_item .wh_pre_day { color: red; } .wh_content_item .wh_chose_day { background: rgba(168, 208, 240, 1); color: #fff; border-radius: 10px; } </style>
calendar.js 是生成月份盘,月数多少天的逻辑
import moment from "moment"; export default { // 当某月的天数 getDaysInOneMonth(date) { const year = date.getFullYear(); const month = date.getMonth() + 1; const d = new Date(year, month, 0); return d.getDate(); }, // 向前空几个 getMonthweek(date) { const year = date.getFullYear(); const month = date.getMonth() + 1; const dateFirstOne = new Date(year + '/' + month + '/1'); return this.sundayStart ? dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() : dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1; }, /** * 获取当前日期上个月或者下个月 */ getOtherMonth(date, str = 'nextMonth') { const timeArray = this.dateFormat(date).split('/'); const year = timeArray[0]; const month = timeArray[1]; const day = timeArray[2]; let year2 = year; let month2; if (str === 'nextMonth') { month2 = parseInt(month) + 1; if (month2 == 13) { year2 = parseInt(year2) + 1; month2 = 1; } } else { month2 = parseInt(month) - 1; if (month2 == 0) { year2 = parseInt(year2) - 1; month2 = 12; } } let day2 = day; const days2 = new Date(year2, month2, 0).getDate(); if (day2 > days2) { day2 = days2; } if (month2 < 10) { month2 = '0' + month2; } if (day2 < 10) { day2 = '0' + day2; } const t2 = year2 + '/' + month2 + '/' + day2; return new Date(t2); }, // 上个月末尾的一些日期 getLeftArr(date) { const arr = []; const leftNum = this.getMonthweek(date); const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1; const preDate = this.getOtherMonth(date, 'preMonth'); // 上个月多少开始 for (let i = 0; i < leftNum; i++) { const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i); arr.push({ id: num + i, date: nowTime, isToday: false, isPreDay:false, otherMonth: 'preMonth', }); } return arr; }, // 下个月末尾的一些日期 getRightArr(date) { const arr = []; const nextDate = this.getOtherMonth(date, 'nextMonth'); const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date); const _length = 7 - leftLength % 7; for (let i = 0; i < _length; i++) { const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1); arr.push({ id: i + 1, date: nowTime, isToday: false, isPreDay:false, otherMonth: 'nextMonth', }); } return arr; }, // format日期 dateFormat(date) { date = typeof date === 'string' ? new Date(date.replace(/-/g, '/')) : date; return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); }, // 获取某月的列表不包括上月和下月 getMonthListNoOther(date) { const arr = []; const num = this.getDaysInOneMonth(date); const year = date.getFullYear(); const month = date.getMonth() + 1; const toDay = this.dateFormat(new Date()); console.log(toDay,'今日日期的格式化'); var curDate = new Date(); var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 const preDay = this.dateFormat(moment(preDate).format('YYYY-MM-DD')); console.log(preDay,'前一日日期的格式化'); for (let i = 0; i < num; i++) { const nowTime = year + '/' + month + '/' + (i + 1); arr.push({ id: i + 1, date: nowTime, isToday: toDay === nowTime, isPreDay: false, otherMonth: 'nowMonth', }); } // console.log(arr,'月份日期') return arr; }, // 获取某月的列表 用于渲染 getMonthList(date) { return [ ...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date) ]; }, // 默认是周一开始 sundayStart: false, };
组件的导出
// index.js import CalendarDemo from './calendar.vue'; export default CalendarDemo;
组件的使用
<template> <div style="background-color:#F7F7F7;padding:0.43rem"> <!-- <NewAppHeader title="行驶里程数据" :backGroundTrans="true" :hideGoback="true"> --> <NewAppHeader :title="DATA_FOREZEN.titleName[type]" :backGroundTrans="true" :hideGoback="true"> <span class="d_left" @click="back"></span> <span class="d_right" @click="showModal('demo')"></span> </NewAppHeader> <div class="d_main" style="padding-top:1rem"> <div class="v_tab"> <div class="tab_general" :class="tab == 1 ? 'tab_active' : ''" @click="changeTab(1)"> 日 </div> <div class="tab_general" :class="tab == 2 ? 'tab_active' : ''" @click="changeTab(2)"> 周 </div> </div> </div> <div style="margin-top:0.45rem;"> <div v-if="tab === 1"> <CalendarDemo ref="Calendar" @change="handelChange" v-on:changeMonth="changeDate" :defaultDate="defaultDate" :futureDayHide="disableDay" :sundayStart="sundayStart" :textTop="textTop" ></CalendarDemo> </div> <div v-else> <CalendarDemo ref="Calendar" v-on:choseDay="clickDay" v-on:changeMonth="changeDate" :defaultDate="defaultDate" :futureDayHide="disableDay" :markDate="markDate" :rangeDate="rangeDate" :sundayStart="sundayStart" :textTop="textTop" ></CalendarDemo> </div> </div> </div> </template> <script> import "@/utils/flexible.js"; const NewAppHeader = () => import("@/components/NewAppHeader"); import CalendarDemo from "./compnent/index"; import moment from "moment"; const DATA_FOREZEN = { titleName:{ voice:'语音控制数据', switch:'远程车控数据', distance:'行驶里程数据' }, noDataTip:{ voice:'无语音控制数据', switch:'无远程车控数据', distance:'无行驶里程数据' }, totoalTip:{ voice:'累计控制', switch:'累计使用远程车控', distance:'累计行驶' }, weekTotal:{ voice:'累计语音控制', switch:'远程车控数据', distance:'累计行驶里程' }, noteC:{ voice:'每一段语音数据都有一段故事', switch:'新宝骏车控大玩家邀你来挑战', distance:'每一段行驶里程都有一段故事' }, Company:{ voice:'次', distance:'KM', switch:'次' }, dateType:{ 1:'周', 2:'周' }, shareType:{ 1:'今日', 2:'本周' } } export default { data() { return { DATA_FOREZEN, sundayStart: true, textTop: ["日", "一", "二", "三", "四", "五", "六"], isWeek: true, tab: 1, defaultDate: Date.parse(new Date()), disableDay: "", markDate: [], rangeDate: [], weekList: [ { date: "1", num: "1" }, { date: "2", num: "2" }, { date: "3", num: "3" }, { date: "4", num: "4" }, { date: "5", num: "5" }, { date: "6", num: "6" }, { date: "7", num: "7" } ], //周里程的列表 lastList: [], }; }, components: { CalendarDemo, NewAppHeader }, filters: { filterDate(value) { return moment(value).format("MM月DD日"); } }, watch: { tab: { handler(val, oldVal) { console.log(val, oldVal); if (val == 2) { this.markDate = this.weekDay(); this.rangeDate = this.weekDay(); this.getData(); } }, deep: true } }, created() { // 时间今日之前的时间不可选 let today = moment().format("YYYY-MM-DD"); this.disableDay = (moment(today).valueOf() / 1000).toString(); // 处理前默认前一天的逻辑 var curDate = new Date(); var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 this.defaultDate = new Date(preDate); this.dateStr = moment(this.defaultDate).format("MM月DD日"); // 获取行驶数据 this.getData(); }, methods: { back() { this.$router.go(-1); }, // 切换日月 changeTab(arg) { this.tab = arg; this.getData(); }, weekDay(data) { if (data) { this.oToday = new Date(data); } else { this.oToday = new Date(); } let defaultDay = 2; console.log(data,'data') this.currentDay = this.oToday.getDay(); // 获取当前周几 console.log(this.currentDay,'currentDay ') if (this.currentDay == 0) { this.currentDay = 7; } let distansDay = this.currentDay - defaultDay; let mondayTime = this.oToday.getTime() - distansDay * 24 * 60 * 60 * 1000; let sundayTime = this.oToday.getTime() + (6 - this.currentDay) * 24 * 60 * 60 * 1000; let arr = []; for (let i = 0; i < 7; i++) { arr.push( moment(mondayTime) .add("days", i) .format("YYYY-MM-DD") ); } console.log(arr) return arr; }, // 子组件的返回参数 clickDay(data) { console.log(data, "时间"); if (this.tab == 2) { this.rangeDate = this.weekDay(data); this.getData(); } else { this.defaultDate = data; this.dateStr = moment(data).format("MM月DD日"); this.getData(); } }, // 接口数据请求 getData() { // ... 省略啦 }, changeDate(data) { console.log(data); //左右点击切换月份 }, } }; </script> <style lang="less" scoped> /deep/ .mint-header-title { font-size: 0.48rem; color: #040b29; background-color: rgb(247, 247, 247); } // /deep/ .new-mt-header.trans{ // background-color: rgb(247, 247, 247); // } .d_left { position: fixed; padding: 0.25rem; top: 0.25rem; background-size: contain; background-repeat: no-repeat; background-position: center; left: 0.43rem; height: 0.44rem; width: 0.25rem; display: inline-block; background-image: url("./../../imgs/vInternet/d_back.png"); } .d_right { height: 0.5rem; width: 0.5rem; background-image: url("./../../imgs/vInternet/d_share.png"); display: inline-block; background-repeat: no-repeat; margin-right: 0.2rem; margin-top: 0.35rem; background-size: 100%; } .d_main { display: flex; justify-content: center; align-items: center; .v_tab { height: 0.93rem; width: 3.73rem; border-radius: 0.53rem; color: #040b29; background-color: #ffffff; display: inherit; align-items: center; justify-content: center; font-size: 0.43rem; .tab_general { width: 1.87rem; border-radius: 0.53rem; height: 0.93rem; line-height: 0.93rem; text-align: center; } .tab_active { background: rgba(235, 246, 255, 1); } } } .d_note { height: 0.59rem; font-size: 0.51rem; font-family: Helvetica; color: rgba(4, 11, 41, 1); line-height: 0.59rem; margin: 0.41rem 0rem; font-style: italic; font-weight: 600; } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。