Vue+Vant实现手机端(H5)日期选择组件(实时、前一天、前七天、前三十天、前一周、前一个月)并前后切换

Vue+Vant实现手机端(H5)日期选择组件(实时、前一天、前七天、前三十天、前一周、前一个月)并前后切换

技术杂谈小彩虹2021-08-25 2:16:14100A+A-

项目采用Vue+vant并改变根节点为37.5(postcss-px2rem-exclude)

先上界面

image.png

布局(采用公共css+vant组件)

<template>
  <div>
    <div class="mon-dis-flex mon-item-center">
      <div class="mon-bg-FE3E46 mon-fc-ffffff mon-fs32 mon-width-80 mon-text-center">Daily</div>
      <div class="mon-fs28 mon-fc-292929 mon-margin-left15">{{ dateTime }}</div>
      <img @click="selectDateBox = !selectDateBox" src="../assets/image/business/ic_default.png" class="mon-width-32 mon-height-32 mon-margin-left15"/>
    </div>
    <div class="mon-dis-flex">
      <div class="mon-fs28 mon-fc-5C5C5C mon-weight-400 mon-margin-top20">{{ tipsText }}</div>
      <div class="mon-flex-1"></div>
      <div class="mon-margin-top-30 mon-margin-bottom30" v-show="dateType==0||dateType==1||dateType==4||dateType==5">
        <van-button @click="beforeChange" color="#F5F5F5" size="small" icon="arrow-left" type="primary" class="mon-margin-right15"/>
        <van-button :disabled="beforeDateNumber==0?beforeWeekMonthNumber==1:false" @click="endChange" color="#F5F5F5" size="small" icon="arrow" type="primary"/>
      </div>
    </div>
    <div v-show="selectDateBox" class="mon-dis-flex mon-just-sb mon-fc-5C5C5C mon-fs24 mon-weight-400 mon-padding25 mon-box-show mon-margin-25">
      <div :class="dateType==0?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(0)">实时</div>
      <div :class="dateType==1?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(1)">1天</div>
      <div :class="dateType==2?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(2)">7天</div>
      <div :class="dateType==3?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(3)">30天</div>
      <div :class="dateType==4?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(4)"></div>
      <div :class="dateType==5?'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(5)"></div>
    </div>
  </div>
</template>

js代码

<script>
export default {
  name: "selectDate",
  components: {},
  data() {
    return {
      // 选择时间组件
      selectDateBox: false,
      // 获取当前时间
      dateTime: this.common.formatDate(new Date()),
      //时间类型
      dateType: 0,
      // 向前几天
      beforeDateNumber: 0,
      // 向前多少周或多少月
      beforeWeekMonthNumber: 1,
      // 提示文字
      tipsText: '相比昨日',
    }
  },
  mounted() {
  },
  methods: {
    // 父组件传值
    sendFatherData() {
      this.$emit('changeDate', this.dateTime)
    },
    // 向左按钮
    beforeChange() {
      if (this.dateType < 2) {
        this.beforeDateNumber -= 1
        this.dateTime = this.common.funDate(this.beforeDateNumber)
      } else {
        if (this.dateType == 4) {
          this.beforeWeekMonthNumber += 1
          this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
        } else {
          this.beforeWeekMonthNumber -= 1
          this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
        }
      }
      this.sendFatherData()
    },
    // 向后按钮
    endChange() {
      if (this.dateType < 2) {
        this.beforeDateNumber += 1
        if (this.beforeDateNumber == 0) {
          this.dateTime = this.common.formatDate(new Date())
        } else {
          this.dateTime = this.common.funDate(this.beforeDateNumber)
        }
      } else {
        if (this.dateType == 4) {
          this.beforeWeekMonthNumber -= 1
          this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
        } else {
          this.beforeWeekMonthNumber += 1
          this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
        }
      }
      this.sendFatherData()
    },
    // 筛选时间
    selectDate(dateType) {
      this.dateType = dateType
      switch (dateType) {
        case 0:
          this.dateTime = this.common.formatDate(new Date())
          this.beforeDateNumber = 0
          this.beforeWeekMonthNumber = 1
          this.sendFatherData()
          this.tipsText = "相比昨日"
          break
        case 1:
          this.dateTime = this.common.funDate(-1)
          this.beforeDateNumber = -1
          this.beforeWeekMonthNumber = 1
          this.sendFatherData()
          this.tipsText = "相比昨日"
          break
        case 2:
          this.dateTime = this.common.funDate(-7) + '~' + this.common.funDate(-1)
          this.sendFatherData()
          this.tipsText = "前7天相比"
          break
        case 3:
          this.dateTime = this.common.funDate(-30) + '~' + this.common.funDate(-1)
          this.sendFatherData()
          this.tipsText = "前30天相比"
          break
        case 4:
          this.beforeDateNumber = 0
          this.beforeWeekMonthNumber = 1
          this.dateTime = this.common.getLastWeekData(this.beforeWeekMonthNumber).start_day + '~' + this.common.getLastWeekData(this.beforeWeekMonthNumber).end_day
          this.sendFatherData()
          this.tipsText = "前一周相比"
          break
        case 5:
          this.beforeDateNumber = 0
          this.beforeWeekMonthNumber = 1
          this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
          this.sendFatherData()
          this.tipsText = `前一月相比`
          break
      }
      this.selectDateBox = false
    }
  }
}
</script>

工具类

// 时间戳转时间格式
const formatDate = (now) => {
    let d = new Date(now);
    let year = d.getFullYear();
    let month = d.getMonth() + 1;
    let date = d.getDate();
    let hours = d.getHours();
    let min = d.getMinutes();
    // let sec = d.getSeconds();
    return year + "-" + (month < 10 ? "0" + month : month)
        + "-" + (date < 10 ? "0" + date : date)
        + ' ' + (hours < 10 ? "0" + hours : hours)
        + ':' + (min < 10 ? "0" + min : min);
};

// 获取月日
const getMonthDate = (now) => {
    let d = new Date(now);
    let month = d.getMonth() + 1;
    let date = d.getDate();
    return (month < 10 ? "0" + month : month) + "-" + (date < 10 ? "0" + date : date)
}

// 获取前后几天的时间
const funDate = (aa) => {
    let date1 = new Date(),
        time1 = (date1.getMonth() + 1) + "~" + date1.getDate();//time1表示当前时间
    let date2 = new Date(date1);
    date2.setDate(date1.getDate() + aa);
    let date3 = date2.getDate();
    let month = date2.getMonth() + 1
    return (month < 10 ? "0" + month : month) + "-" + (date3 < 10 ? "0" + date3 : date3)
}

// 获得上周周一~周日的年月日
export function getLastWeekData(number) {
    let lastWeek = {};
    let date = new Date();
    // 上周一的日期
    date.setDate(date.getDate() - (7 * number) - date.getDay() + 1);
    let month_start = date.getMonth() + 1;
    let date_start = date.getDate();
    lastWeek.start_day = (month_start < 10 ? "0" + month_start : month_start) + "-" + (date_start < 10 ? "0" + date_start : date_start);
    // 上周日的日期
    date.setDate(date.getDate() + 6);
    let month_end = date.getMonth() + 1;
    let date_end = date.getDate();
    lastWeek.end_day = (month_end < 10 ? "0" + month_end : month_end) + "-" + (date_end < 10 ? "0" + date_end : date_end);
    return lastWeek
}

/** * 获得相对当月AddMonthCount个月的起止日期 * AddMonthCount为0 代表当月 为-1代表上一个月 为1代表下一个月 以此类推 * ***/
function getMonthStartAndEnd(AddMonthCount) {
    AddMonthCount -= 2
    //获取当前时间
    let currentDate = new Date();
    let month = currentDate.getMonth() + AddMonthCount;
    if (month < 0) {
        let n = parseInt((-month) / 12);
        month += n * 12;
        currentDate.setFullYear(currentDate.getFullYear() - n);
    }
    currentDate = new Date(currentDate.setMonth(month));
    //获得当前月份0-11
    let currentMonth = currentDate.getMonth();
    //获得当前年份4位年
    let currentYear = currentDate.getFullYear();
    //获得上一个月的第一天
    let currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
    //获得上一月的最后一天
    let currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0);
    //返回
    return getDateStr3(currentMonthFirstDay) + '~' + getDateStr3(currentMonthLastDay);
}

//获取当前日期mm-dd
//date 为时间对象
function getDateStr3(date) {
    var month = "";
    var day = "";
    var now = date;
    if ((now.getMonth() + 1) < 10) {
        month = "0" + (now.getMonth() + 1);
    } else {
        month = "" + (now.getMonth() + 1);
    }
    if ((now.getDate()) < 10) {
        day = "0" + (now.getDate());
    } else {
        day = "" + (now.getDate());
    }
    return month + "-" + day;
}
/* font-size */

.mon-fs16{ font-size: 16px; }
.mon-fs22{ font-size: 22px; }
.mon-fs24{ font-size: 24px; }
.mon-fs26{ font-size: 26px; }
.mon-fs28{ font-size: 28px; }
.mon-fs30{ font-size: 30px; }
.mon-fs32{ font-size: 32px; }
.mon-fs34{ font-size: 34px; }
.mon-fs36{ font-size: 36px; }
.mon-fs38{ font-size: 38px; }
.mon-fs40{ font-size: 40px; }
.mon-fs60{ font-size: 60px; }

/* font-weight */

.mon-weight-100{ font-weight: 100; }
.mon-weight-400{ font-weight: 400; }
.mon-weight-bold{ font-weight: bold; }

/* font-family */
.mon-font-family{font-family: PingFang SC;}
/* color */

.mon-fc-333333{ color: #333333; }
.mon-fc-5C5C5C{ color: #5c5c5c; }
.mon-fc-999999{ color: #999999; }
.mon-fc-f5f5f5{ color: #f5f5f5; }
.mon-fc-ffffff{ color: #ffffff; }
.mon-fc-3FA5FC{ color: #3FA5FC; }
.mon-fc-FE3E46{ color: #FE3E46; }
.mon-fc-292929{ color: #292929; }
.mon-fc-58DD81{ color: #58DD81; }

/* background-color */

.mon-bg-333333{ background-color: #333333; }
.mon-bg-999999{ background-color: #999999; }
.mon-bg-f5f5f5{ background-color: #f5f5f5; }
.mon-bg-f7f7f7{ background-color: #f7f7f7; }
.mon-bg-ffffff{ background-color: #ffffff; }
.mon-bg-FE3E46{ background-color: #FE3E46; }

/* textAlign */

.mon-text-center{ text-align: center; }
.mon-text-left{ text-align: left; }
.mon-text-right{ text-align: right; }

/* width */

.mon-width100{ width: 100%; }
.mon-width-14{ width: 14px; }
.mon-width-18{ width: 18px; }
.mon-width-22{ width: 22px; }
.mon-width-32{ width: 32px; }
.mon-width-40{ width: 40px; }
.mon-width-80{ width: 80px; }
.mon-width-100{ width: 100px; }
.mon-width-150{ width: 150px; }
.mon-width-200{ width: 200px; }
.mon-width-300{ width: 300px; }
.mon-width-400{ width: 400px; }
.mon-width-500{ width: 500px; }
.mon-width-600{ width: 600px; }

/* height */

.mon-height100vh{ height: 100vh; }
.mon-height100{ height: 100%; }
.mon-height-14{ height: 14px; }
.mon-height-20{ height: 20px; }
.mon-height-24{ height: 24px; }
.mon-height-32{ height: 32px; }
.mon-height-40{ height: 40px; }
.mon-height-100{ height: 100px; }
.mon-height-150{ height: 150px; }
.mon-height-200{ height: 200px; }
.mon-height-300{ height: 300px; }
.mon-height-400{ height: 400px; }
.mon-height-500{ height: 500px; }

/* max-height */

.mon-max-height100vh{ max-height: 100vh; }

/* min-height */

.mon-min-height100vh{ min-height: 100vh; }

/* min-width*/
.mon-min-width-30{ min-width: 30px}

/*line-height*/

.mon-line-htight-20{ line-height: 20px; }
.mon-line-htight-30{ line-height: 30px; }
.mon-line-htight-35{ line-height: 35px; }
.mon-line-htight-36{ line-height: 36px; }
.mon-line-htight-37{ line-height: 37px; }
.mon-line-htight-38{ line-height: 38px; }
.mon-line-htight-40{ line-height: 40px; }
.mon-line-htight-60{ line-height: 60px; }

/* 限制输入行数 */

.mon-textoverflow-1{ overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.mon-textoverflow-2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mon-textoverflow-3{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*box-shadow*/
.mon-box-show{ box-shadow: 0px 1px 6px 0px rgba(80, 80, 80, 0.42); }

/* border */

.mon-solid1black{ border: 1px solid #333333; }
.mon-solid2black{ border: 2px solid #333333; }
.mon-solid4black{ border: 4px solid #333333; }
.mon-solid1white{ border: 1px solid #ffffff; }
.mon-solid2white{ border: 2px solid #ffffff; }
.mon-solid4white{ border: 4px solid #ffffff; }
.mon-solid1gray{ border: 1px solid #eeeeee; }

/* borderRadius */

.mon-bra6{ border-radius: 6px; }
.mon-bra10{ border-radius: 10px; }
.mon-bra12{ border-radius: 12px; }
.mon-bra14{ border-radius: 14px; }
.mon-bra16{ border-radius: 16px; }

/* display */

.mon-dis-inline{ display: inline; }
.mon-dis-inBlock{ display: inline-block; }
.mon-dis-block{ display: block; }
.mon-dis-none{ display: none; }
.mon-dis-flex{ display: flex; }

.mon-flex-1{ flex: 1; }

.mon-dir-row{ flex-direction: row; }
.mon-dir-rowre{ flex-direction: row-reverse; }
.mon-dir-column{ flex-direction: column; }
.mon-dir-columnre{ flex-direction: column-reverse; }

.mon-rap-nowrap{ flex-flow: nowrap; }
.mon-rap-wrap{ flex-flow: wrap; }
.mon-rap-wrapre{ flex-flow: wrap-reverse; }

.mon-just-sa{ justify-content: space-around; }
.mon-just-sb{ justify-content: space-between; }
.mon-just-cen{ justify-content: center; }

.mon-ali-sa{ align-content: space-around; }
.mon-ali-sb{ align-content: space-between; }
.mon-ali-cen{ align-content: center; }

.mon-item-start{ align-items: flex-start; }
.mon-item-end{ align-items: flex-end; }
.mon-item-center{ align-items: center; }
.mon-item-baseline{ align-items: baseline; }
.mon-item-stretch{ align-items: stretch; }

/* position */

.mon-position-re{ position: relative; }
.mon-position-ab{ position: absolute; }
.mon-position-fe{ position: fixed; }

/* top */

.mon-top-4{ top: 4px; }
.mon-top-6{ top: 6px; }
.mon-top-8{ top: 8px; }
.mon-top-10{ top: 10px; }
.mon-top-12{ top: 12px; }
.mon-top-14{ top: 14px; }
.mon-top-16{ top: 16px; }
.mon-top-18{ top: 18px; }
.mon-top-20{ top: 20px; }

/* right */

.mon-right-4{ right: 4px; }
.mon-right-6{ right: 6px; }
.mon-right-8{ right: 8px; }
.mon-right-10{ right: 10px; }
.mon-right-12{ right: 12px; }
.mon-right-14{ right: 14px; }
.mon-right-16{ right: 16px; }
.mon-right-18{ right: 18px; }
.mon-right-20{ right: 20px; }

/* bottom */

.mon-bottom-2{ bottom: 2px; }
.mon-bottom-4{ bottom: 4px; }
.mon-bottom-6{ bottom: 6px; }
.mon-bottom-8{ bottom: 8px; }
.mon-bottom-10{ bottom: 10px; }
.mon-bottom-12{ bottom: 12px; }
.mon-bottom-14{ bottom: 14px; }
.mon-bottom-16{ bottom: 16px; }
.mon-bottom-18{ bottom: 18px; }
.mon-bottom-20{ bottom: 20px; }

/* left */

.mon-left-4{ left: 4px; }
.mon-left-6{ left: 6px; }
.mon-left-8{ left: 8px; }
.mon-left-10{ left: 10px; }
.mon-left-12{ left: 12px; }
.mon-left-14{ left: 14px; }
.mon-left-16{ left: 16px; }
.mon-left-18{ left: 18px; }
.mon-left-20{ left: 20px; }

/* margin */

.mon-margin4{ margin: 4px; }
.mon-margin5{ margin: 5px; }
.mon-margin6{ margin: 6px; }
.mon-margin10{ margin: 10px; }
.mon-margin12{ margin: 12px; }
.mon-margin15{ margin: 15px; }
.mon-margin20{ margin: 20px; }
.mon-margin25{ margin: 25px; }
.mon-margin30{ margin: 30px; }

.mon-margin-25{ margin: 0 -25px; }

.mon-margin-top5{ margin-top: 5px; }
.mon-margin-top10{ margin-top: 10px; }
.mon-margin-top12{ margin-top: 12px; }
.mon-margin-top15{ margin-top: 15px; }
.mon-margin-top20{ margin-top: 20px; }
.mon-margin-top30{ margin-top: 30px; }

.mon-margin-top-30{ margin-top: -30px; }

.mon-margin-bottom5{ margin-bottom: 5px; }
.mon-margin-bottom10{ margin-bottom: 10px; }
.mon-margin-bottom12{ margin-bottom: 12px; }
.mon-margin-bottom15{ margin-bottom: 15px; }
.mon-margin-bottom20{ margin-bottom: 20px; }
.mon-margin-bottom30{ margin-bottom: 30px; }
.mon-margin-bottom40{ margin-bottom: 40px; }
.mon-margin-bottom60{ margin-bottom: 60px; }

.mon-margin-left5{ margin-left: 5px; }
.mon-margin-left10{ margin-left: 10px; }
.mon-margin-left12{ margin-left: 12px; }
.mon-margin-left15{ margin-left: 15px; }
.mon-margin-left20{ margin-left: 20px; }

.mon-margin-right5{ margin-right: 5px; }
.mon-margin-right10{ margin-right: 10px; }
.mon-margin-right12{ margin-right: 12px; }
.mon-margin-right15{ margin-right: 15px; }
.mon-margin-right20{ margin-right: 20px; }
.mon-margin-right90{ margin-right: 90px; }

/* padding */

.mon-padding5{ padding: 5px; }
.mon-padding10{ padding: 10px; }
.mon-padding12{ padding: 12px; }
.mon-padding15{ padding: 15px; }
.mon-padding18{ padding: 18px; }
.mon-padding20{ padding: 20px; }
.mon-padding25{ padding: 25px; }


.mon-padding-top5{ padding-top: 5px; }
.mon-padding-top10{ padding-top: 10px; }
.mon-padding-top12{ padding-top: 12px; }
.mon-padding-top15{ padding-top: 15px; }
.mon-padding-top25{ padding-top: 25px; }
.mon-padding-top40{ padding-top: 40px; }

.mon-padding-bottom5{ padding-bottom: 5px; }
.mon-padding-bottom10{ padding-bottom: 10px; }
.mon-padding-bottom12{ padding-bottom: 12px; }
.mon-padding-bottom15{ padding-bottom: 15px; }
.mon-padding-bottom20{ padding-bottom: 20px; }
.mon-padding-bottom25{ padding-bottom: 25px; }
.mon-padding-bottom30{ padding-bottom: 30px; }
.mon-padding-bottom40{ padding-bottom: 40px; }

.mon-padding-left5{ padding-left: 5px; }
.mon-padding-left10{ padding-left: 10px; }
.mon-padding-left12{ padding-left: 12px; }
.mon-padding-left15{ padding-left: 15px; }
.mon-padding-left20{ padding-left: 20px; }
.mon-padding-left25{ padding-left: 25px; }
.mon-padding-left40{ padding-left: 40px; }

.mon-padding-right5{ padding-right: 5px; }
.mon-padding-right10{ padding-right: 10px; }
.mon-padding-right12{ padding-right: 12px; }
.mon-padding-right15{ padding-right: 15px; }
.mon-padding-right25{ padding-right: 25px; }
.mon-padding-right40{ padding-right: 40px; }

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们