vue-cli使用vant-ui时间选择器DatetimePicker和选中的时间修改以及开始时间不能超过结束时间实例

element-ui的时间选择器一条龙服务引入组件就可以实现时间选择以及选中时间的渲染，而vant-ui官方文档虽然有关于时间选择器的使用，但是发现只能引入选择时间的组件，什么功能都没有实现，所有的逻辑都要靠自己写，最近刚入门做此功能的实现发现很少能找到相关完整内容的博客，所以想写一篇完整的功能实现，小白也能轻松get~

功能模块初始化显示当前的时间

页面效果如下

datetimePicker放在popup组件里使用，点击事件显示底部弹出层

组件的引入：

import {
      Popup } from 'vant';
import {
      DatetimePicker } from 'vant';

页面结构如下：

     <div class="start-time">
        <p class="start-time-p">开始时间</p>
        <p @click="startTimeShow = true">
        //使用v-if渲染条件为选择器时间被选中则渲染被选中的时间；否则显示当前时间
          <span v-if="isSelect">{
     {
     startPicker}}</span>
          <span v-else>{
     {
     date}}</span>
        </p>
        <van-popup v-model="startTimeShow" position="bottom" :style="{ height: '35%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择开始日期"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="startTimeShow=false"
            @confirm="confirmPickerStart"
          />
        </van-popup>
      </div>

     <div class="end-time">
        <p class="end-time-p">结束时间</p>
        <p @click="endTimeShow = true;">
          <span v-if="Select">{
     {
     endPicker}}</span>
          <span v-else>{
     {
     date}}</span>
        </p>
        <van-popup v-model="endTimeShow" position="bottom" :style="{ height: '35%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择结束日期"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="endTimeShow=false"
            @confirm="confirmPickerEnd"
          />
        </van-popup>
      </div>

因为很多地方用到了时间格式的转换，所以项目中建立了公共js方法
common.js：

// 标准时间转换
export function msToDate(time) {
     
  let datetime = new Date(time);
  let year = datetime.getFullYear();
  let month = datetime.getMonth();
  let date = datetime.getDate();
  let hour = datetime.getHours();
  let minute = datetime.getMinutes();
  let second = datetime.getSeconds();
  let result1 =
    year +
    '-' +
    (month + 1 >= 10 ? month + 1 : '0' + (month + 1)) +
    '-' +
    (date + 1 < 10 ? '0' + date : date) +
    ' ' +
    (hour + 1 < 10 ? '0' + hour : hour) +
    ':' +
    (minute + 1 < 10 ? '0' + minute : minute) +
    ':' +
    (second + 1 < 10 ? '0' + second : second);

  let result2 =
    year +
    '-' +
    (month + 1 >= 10 ? month + 1 : '0' + (month + 1)) +
    '-' +
    (date + 1 < 10 ? '0' + date : date);
  let result = {
     
    hasTime: result1, // ---> 2017-09-19 08:00:00
    withoutTime: result2 // ---> 2017-09-19
  };
  return result;
}

页面中引入js方法（使用在下面）：

import {
     msToDate} from '../utils/common';

script:（因为我做的是历史记录的查询，所以可选择的最大日期是当前日期）

 data() {
     
    return {
     
      date:'',  //初始化日期为当前日期
      minDate: new Date(2010, 0, 1),  //可选择的最小日期
      maxDate: new Date(),  //可选择的最大日期
      currentDate: new Date(),   //选择器默认显示为当前日期
      startTimeShow:false,  //开始日期时间选择器显示状态
      endTimeShow:false,  //结束日期时间选择器显示状态
      isSelect:false,   //开始日期被选中的状态
      Select:false,  //结束日期被选中的状态
      startPicker:'',  //被选中的开始日期
      endPicker:'',  //被选中的结束日期
    },
 }

  methods: {
     
    //开始时间选择器确认按钮触发事件,根据是否被选中的条件渲染当前时间或被选中的开始时间
    confirmPickerStart(val){
     
      // console.log(msToDate(val).withoutTime)
      this.startPicker=msToDate(val).withoutTime;

      //用户先选择结束时间时取两者的值进行比较判断
      if(new Date(this.startPicker)>new Date(this.endPicker)){
       
        //开始时间大于结束时间被选中的状态返回false，选中的时间不渲染，datePicker不关闭
        this.isSelect = false;    
        Toast({
     
          message:'结束日期不能在开始日期之前',
          position:'bottom'
        });
      }else{
     
        //否则返回true，datePicker关闭
        this.isSelect=true;
        this.startTimeShow = false;
      }
    },
    //结束时间选择器确认按钮触发事件,根据是否被选中的条件渲染当前时间或被选中的结束时间
    confirmPickerEnd(val){
     
      this.endPicker=msToDate(val).withoutTime;
      //用户先选择开始时间时取两者的值进行比较判断
      if(new Date(this.startPicker)>new Date(this.endPicker)){
     
        console.log(false)
        //开始时间大于结束时间被选中的状态返回false，选中的时间不渲染，datePicker不关闭
        this.Select = false;
        Toast({
     
          message:'结束日期不能在开始日期之前',
          position:'bottom'
          });
      }else{
      
        console.log(true)
        //否则返回true，条件渲染，datePicker关闭
        this.Select=true;
        this.endTimeShow = false;
      }
    },
  }

因为做了日期比较的判断，选中状态isSelect返回false要有提示，所以使用了Toast组件

import {
      Toast } from 'vant';

完成~
就是有一个小问题，再一次选择时间时若选中方法返回false选中的日期不渲染但是之前选过的日期也会因为v-if导致变回当前日期