Vant 之 封装常用的时间选择器

话不多说，上效果图

         

HTML代码

<template>
  <div class="profly-layout">
    <!-- 开始时间 -->
    <van-field
      v-model="selectDate.startObj.textTime"
      label="开始时间"
      right-icon="arrow-down"
      readonly
      @click="showDataBox('startTime', selectDate.startObj.objectDate)"
    />
    <!-- 结束时间 -->
    <van-field
      v-model="selectDate.endObj.textTime"
      label="结束时间"
      right-icon="arrow-down"
      readonly
      @click="showDataBox('endTime', selectDate.endObj.objectDate)"
    />
    <!-- 请假时长 -->
    <van-field
      v-model="selectDate.intervalHourse"
      disabled
      label="请假时长"
      class="hour"
    />
 
    <!-- 请假时间弹框 -->
    <van-popup v-model="selectDate.dateShow" position="bottom">
      <div class="wrapper">
        <van-datetime-picker
          v-model="selectDate.currentDate"
          type="datetime"
          :min-date="selectDate.minDate"
          :max-date="selectDate.maxDate"
          @confirm="confirmDate"
          @cancel="cancelDate"
          :filter="dateFilter"
        />
      </div>
    </van-popup>
  </div>
</template>

JS代码

<script>
import { getStringTime, stringTimeStyle } from '../common/commonJs'
export default {
  name: 'profly',
  data() {
    return {
      selectDate: {
        startObj: {
          textTime: '', //*2021-02-03 10:00:00格式
          objectDate: new Date(), //*The May ...格式
          date: '', //*20210203100000
        },
        endObj: {
          textTime: '', //*2021-02-03 10:00:00格式
          objectDate: new Date(), //*The May ...格式
          date: '', //*20210203100000
        },
        intervalHourse: '', //*间隔时长
        currentDate: new Date(), //*请假时间弹框的时间选择
        choseTimeType: '', //*当前选择的时间类型
        dateShow: false, //*是否显示时间选择弹层
        minDate: new Date( //*前后五年
          parseInt(getStringTime(new Date(), 'year')) - 5,
          0,
          1
        ),
        maxDate: new Date(
          parseInt(getStringTime(new Date(), 'year')) + 5,
          11,
          31
        ),
      },
    }
  },
  methods: {
    /**
     * 监听方法
     */
    //显示时间弹框
    showDataBox(type, time) {
      console.log(123123123)
      this.choseTimeType = type
      if (time !== undefined || time !== null) {
        this.selectDate.currentDate = time
      } else {
        this.selectDate.currentDate = new Date()
      }
      this.selectDate.dateShow = true
    },
    //确认请假时间的选择
    confirmDate(e) {
      this.setTime(e)
      if (this.choseTimeType == 'startTime') {
        //* 设置开始时间
        this.selectDate.startObj = this.setTime(e)
      } else {
        //* 设置结束时间
        this.selectDate.endObj = this.setTime(e)
      }
      //*计算请假时长
      if (
        !(
          this.selectDate.startObj.textTime.length !== 0 &&
          this.selectDate.endObj.textTime.length !== 0
        )
      ) {
        //*关闭弹层
        return this.cancelDate()
      }
      let bool = this.calcleDate()
      if (!bool) {
        this.$toast('时间选择错误！')
      }
      //*关闭弹层
      this.cancelDate()
    },
    //* 设置时间
    setTime(e) {
      return {
        date: getStringTime(e, 'all'),
        textTime: `${stringTimeStyle(
          getStringTime(e, 'ymd'),
          '-'
        )} ${getStringTime(e, 'hours')}:${getStringTime(e, 'min')}`,
        objectDate: e,
      }
    },
 
    //*计算请假时长
    calcleDate() {
      let strDateStart = this.selectDate.startObj.objectDate
      let strDateEnd = this.selectDate.endObj.objectDate
      this.selectDate.intervalHourse = ''
      let iHouse = (strDateEnd.getTime() - strDateStart.getTime()) / 1000 / 60 / 60
      if (iHouse <= 0) {
        this.selectDate.intervalHourse = 0 + '小时'
        return false
      }
      this.selectDate.intervalHourse = Math.round(iHouse * 10) / 10 + ' 小时'
      console.log(this.selectDate.intervalHourse)
      return true
    },
    //*关闭弹层
    cancelDate() {
      this.selectDate.dateShow = false
    },
    //*时间选择过滤
    dateFilter(type, options) {
      //*每隔30分钟显示
      if (type === 'minute') {
        return options.filter((option) => option % 30 === 0)
      }
      return options
    },
    //*时间初始化
    dateInit() {
      this.selectDate.startObj = this.setTime(
        new Date(
          getStringTime(new Date(), 'year'),
          getStringTime(new Date(), 'mon') - 1,
          getStringTime(new Date(), 'day'),
          getStringTime(new Date(), 'hours')
          // getStringTime("00")
        )
      )
      this.selectDate.endObj = this.setTime(
        new Date(
          getStringTime(new Date(), 'year'),
          getStringTime(new Date(), 'mon') - 1,
          getStringTime(new Date(), 'day'),
          parseInt(getStringTime(new Date(), 'hours')) + 1
        )
      )
      this.calcleDate()
    },
    /**
     * 请求数据
     */
    //*获取数据
  },
  mounted() {
    this.dateInit()
  },
  computed: {},
  watch: {},
  filters: {},
}
</script>

注：JS中用到的时间方法，在我的时间文章中可以找到