选择vant日期组件Calendar 日历

  <!--发现时间-->
        <van-field readonly clickable name="picker" :value="form.crimeTimeName" label="发现时间" placeholder="点击选择发现时间" @click="calendarShow = true" required :rules="[{ required: true, message: '请选择发现时间' }]" />
        <!--        时间组件-->
        <van-calendar v-model="calendarShow" :min-date="minDate" :max-date="maxDate" :show-confirm="false" @confirm="onConfirmDate" />
        <van-popup v-model="datetimePickerShow" position="bottom">
          <van-datetime-picker type="time" title="选择时间" @cancel="cancelDatetimePicker" @confirm="confirmDatetimePicker" />
        </van-popup>

将 show-confirm 设置为 false 可以隐藏确认按钮，这种情况下选择完成后会立即触发 confirm 事件。

方法
getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

import { formatDate,parseDate } from "@/common/wordBook";
    //日历
    onConfirmDate(date) {
      this.datetimePickerShow = true;  //显示时分的弹窗组件
      this.currentDate = formatDate(date.getTime(), 'yyyy-MM-dd')
    },
//点击取消取消选择时分组件
  cancelDatetimePicker() {
      this.datetimePickerShow = false;
    },
   //时分确认
    confirmDatetimePicker(date) {
      this.form.crimeTimeName = this.currentDate + " " + date;
      this.form.crimeTime = parseDate(this.form.crimeTimeName + ":00");
      this.calendarShow = false;
      this.datetimePickerShow = false;
    },

// 日期格式化 formatDate(time,'yyyy-MM-dd hh:mm:ss')
export function formatDate(date, fmt) {
    if (typeof date !== 'number') {
        date = Number(date)
    }
    if (date < 1) {
        return ''
    } else {
        date = new Date(date);
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
            }
        }
        return fmt
    }

}

function padLeftZero(str) {
    return ('00' + str).substr(str.length)
}


/**
 * 字符串时间转换成时间戳
 * @param dateStr 支持 2018-11-5 11:24:51 | 2018/11/5 11:24:54 | 2018-11-5T11:25:09.256Z
 * @returns {number} 时间戳
 */
export const parseDate = (dateStr) => {
  console.log(dateStr)
  const rShortMatch = /^\s*(\d{4})-(\d{1,2})-(\d{1,2})\s*$/,
    rLongMatch = /^\s*(\d{4})-(\d{1,2})-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{1,2})\s*$/,
    rMaxMatch = /^\s*(\d{4})-(\d{1,2})-(\d{1,2})T(\d{1,2}):(\d{1,2}):(\d{1,2}).*\s*$/,
    rLedMatch = /^\s*(\d{4})\/(\d{1,2})\/(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{1,2})\s*$/;
  var match;

  if (match = dateStr.match(rShortMatch)) {
    return +new Date(+match[1], +match[2] - 1, +match[3])
  } else if (match = dateStr.match(rLongMatch)) {
    return +new Date(+match[1], +match[2] - 1, +match[3], +match[4], +match[5], +match[6])
  } else if (match = dateStr.match(rMaxMatch)) {
    console.log(match)
    return +new Date(+match[1], +match[2] - 1, +match[3], +match[4], +match[5], +match[6])
  } else if (match = dateStr.match(rLedMatch)) {
    return +new Date(+match[1], +match[2] - 1, +match[3], +match[4], +match[5], +match[6])
  }
};