如何实现Vue的H5日历组件详解？

本文共计2921个文字，预计阅读时间需要12分钟。

原文：本文字例为大家分享了Vue的H5日历组件实现代码，供大家参考，具体内容如下：+ 日历样式自定义 + 日历组件 + template + section class=wh_container + div class=wh_content_all + div class=wh_top_chang”

改写后：以下是一个Vue H5日历组件的实现示例，包含样式自定义、组件结构和部分模板内容：+ 自定义日历样式 + 日历组件设计 + 模板代码：section class=wh_container + div class=wh_content_all + div class=wh_top_chang

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。