Vue+Vant realize mobile terminal (H5) date selection components (real-time, one day before, seven days before, thirty days before, one week before, one month before) and before and after switching

Vue+vant and change the root node to 37.5(postCSS-px2REM-exclude)

On the first interface

Layout (with common CSS + Vant components)

<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)">real-time</div>
      <div :class="dateType==1? 'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(1)">1 day</div>
      <div :class="dateType==2? 'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(2)">7 days</div>
      <div :class="dateType==3? 'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(3)">30 days</div>
      <div :class="dateType==4? 'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(4)">weeks</div>
      <div :class="dateType==5? 'mon-fc-FE3E46 mon-weight-bold':''" @click="selectDate(5)">month</div>
    </div>
  </div>
</template>
Copy the code

Js code

<script>
export default {
  name: "selectDate".components: {},
  data() {
    return {
      // Select the time component
      selectDateBox: false.// Get the current time
      dateTime: this.common.formatDate(new Date()),
      // Time type
      dateType: 0.// The other day
      beforeDateNumber: 0.// How many weeks or months ahead
      beforeWeekMonthNumber: 1.// Prompt text
      tipsText: 'Compared to yesterday',}},mounted(){},methods: {
    // The parent component passes the value
    sendFatherData() {
      this.$emit('changeDate'.this.dateTime)
    },
    // The left button
    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()
    },
    // Back button
    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()
    },
    // Filter time
    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 = "Compared to yesterday"
          break
        case 1:
          this.dateTime = this.common.funDate(-1)
          this.beforeDateNumber = -1
          this.beforeWeekMonthNumber = 1
          this.sendFatherData()
          this.tipsText = "Compared to yesterday"
          break
        case 2:
          this.dateTime = this.common.funDate(-7) + '~' + this.common.funDate(-1)
          this.sendFatherData()
          this.tipsText = "Compared to the first 7 days."
          break
        case 3:
          this.dateTime = this.common.funDate(-30) + '~' + this.common.funDate(-1)
          this.sendFatherData()
          this.tipsText = "Compared to the first 30 days."
          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 = "Compared to the previous week."
          break
        case 5:
          this.beforeDateNumber = 0
          this.beforeWeekMonthNumber = 1
          this.dateTime = this.common.getMonthStartAndEnd(this.beforeWeekMonthNumber)
          this.sendFatherData()
          this.tipsText = 'compared with the previous month'
          break
      }
      this.selectDateBox = false
    }
  }
}
</script>
Copy the code

Utility class

// Timestamp to time format
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);
};

// Get the month date
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)
}

// Get the days before and after
const funDate = (aa) = > {
    let date1 = new Date(),
        time1 = (date1.getMonth() + 1) + "~" + date1.getDate();//time1 indicates the current time
    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)
}

// Get the last Monday to Sunday
export function getLastWeekData(number) {
    let lastWeek = {};
    let date = new Date(a);// Last Monday
    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);
    // Last Sunday
    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
}

/** * Obtain the start and end dates of monthMonthCount relative to the current month. * AddMonthCount 0 indicates that the current month is monthMonthCount -1 indicates that the previous month is MonthCount 1 indicates that the next month and so on * ***/
function getMonthStartAndEnd(AddMonthCount) {
    AddMonthCount -= 2
    // Get the current time
    let currentDate = new Date(a);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));
    // Get the current month 0-11
    let currentMonth = currentDate.getMonth();
    // Get 4 bits of the current year
    let currentYear = currentDate.getFullYear();
    // Get the first day of the previous month
    let currentMonthFirstDay = new Date(currentYear, currentMonth, 1);
    // Get the last day of the previous month
    let currentMonthLastDay = new Date(currentYear, currentMonth + 1.0);
    / / return
    return getDateStr3(currentMonthFirstDay) + '~' + getDateStr3(currentMonthLastDay);
}

// Get the current date mm-dd
// Date is the time object
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;
}
Copy the code

/* 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; }

/* Limits the number of input lines */

.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; }

Copy the code