本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did121242