vue2 时间选择开始与结束组件

工作中app时常会遇到时间选择组件,以下为vue2版本时间组件

``

<template>
  <div class="signature">
    <div class="font-32 pl-10 bor-l-4-00B593 line-h-10">时间选择组件</div>
    <van-cell value="勘察开始时间:" required />
      <div class="bor-t-1-888 mt-20 pt-20 fb pb-38 pl-14 font-28">
            <div @click="stateTimeShow = true" class="w-200 bor-1-999 fb space-between fb-center h-50 pl-20 pr-20 font-26 c-262626"><span>{{startDate}}</span> </div>
            <van-cell value="勘察结束时间:" required />

            <div @click="endTimeShow = true" class="w-200 bor-1-999 fb space-between fb-center h-50 pl-20 pr-20 font-26 c-262626"><span>{{endDate}}</span> </div>
          </div>
      <van-popup v-model="stateTimeShow" position="bottom" :style="{ height: '47%' }">
        <van-datetime-picker v-model="startTime" type="datetime" @confirm="startConfirmFnTime()"
          @cancel="startCancelFnTime()"></van-datetime-picker>
      </van-popup>

      <van-popup v-model="endTimeShow" position="bottom" :style="{ height: '47%' }">
        <van-datetime-picker v-model="endTime" type="datetime" @confirm="endConfirmFnTime()" @cancel="endCancelFnTime()">
        </van-datetime-picker>
      </van-popup>

  </div>
</template>

<style></style>
<script>
//引用组件
import { Toast, DatetimePicker } from "vant";

// import {SignatureName} from 'vue-signature';
import SignatureName from '@/components/SignatureName.vue'

export default {
  name: 'signature',
  data() {
    return {
      states: this.states, //隐患状态值字段
      stateTimeShow: false, //时间窗口状态
      endTimeShow: false, //时间窗口状态
      startTime: new Date(),
      endTime: new Date(),
      startDate: this.getTimes(), //时间字段
      endDate: this.getTimes(), //时间字段
      showPop: false, //窗口状态
    };
  },

  computed: {},

  mounted() {
  },
  methods: {
    getTimes() { //获取当前时间
      var time = new Date().getFullYear() + '-' +
        (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1) + '-' +
        (new Date().getDate() <= 9 ? '0' + (new Date().getDate()) : new Date().getDate()) + ' ' +
        new Date().getHours() + ':' + new Date().getMinutes() + ':' +
        (new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds());
      return time;
    },
    // 时间选择器
    startConfirmFnTime(val) {
      var starts = this.formatTime(this.startTime);
      console.log(starts);
      if (this.endTime) {
        if (starts > this.endTime) {
          Toast('开始时间不能大于结束时间')
        } else {
          this.startDate = starts;
          this.stateTimeShow = false;
        }
      } else {
        this.startDate = starts;
        this.stateTimeShow = false;
      }
    },
    startCancelFnTime(val) {
      this.stateTimeShow = false;
    },
    // 时间选择器
    endConfirmFnTime(val) {
      if (this.startTime && (this.startTime > this.endTime)) {
        Toast('结束时间不能小于开始时间');
        return
      } else {
        this.endDate = this.formatTime(this.endTime);
        console.log(this.endDate, '结束时间');
        this.endTimeShow = false;
      }
    },
    endCancelFnTime(val) {
      this.endTimeShow = false;
    },
    //时间转换
    formatTime(time) { // 时间格式化 2019-09-08 12:30:45
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let hour = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();
      return year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day) + ' ' + (hour >= 10 ? hour : '0' + hour) + ':' + (minute >= 10 ? minute : '0' + minute) + ':' + (second >= 10 ? second : '0' + second);
    },


  },
  mounted() {
    // this.generateSignatures();
  },
};
</script>

<style>
.imgpng {
  width: 200px;
  height: 200px;
}
</style>