使用Vant完成DatetimePicker 日期的选择器操作

<template>
 <div id="date_time_picker">
 
 <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button>
 <van-field v-model="timeValue" placeholder="选择的日期结果" readonly />
 <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
 <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
 </van-popup>
 
 </div>
</template>

 
<script>
 export default {
 data() {
 return {
 msg: '',
 currentDate: new Date(),
 changeDate: new Date(),
 show: false, // 用来显示弹出层
 timeValue: ''
 }
 },
 methods: {
 showPopFn() {
 this.show = true;
 },
 showPopup() {
 this.show = true;
 },
 changeFn() { // 值变化是触发
 this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
 },
 confirmFn() { // 确定按钮
 this.timeValue = this.timeFormat(this.currentDate);
 this.show = false;
 },
 cancelFn(){
 this.show = true;
 },
 timeFormat(time) { // 时间格式化 2019-09-08
 let year = time.getFullYear();
 let month = time.getMonth() + 1;
 let day = time.getDate();
 return year + '年' + month + '月' + day + '日'
 }
 },
 mounted() {
 this.timeFormat(new Date());
 }
 }
</script>
 
<style>
</style>

// main.js文件里面的部分代码
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant'; 
 
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);

<van-datetime-picker
       type="year-month-time"
       value="{{ currentDate }}"
       min-date="{{ minDate }}"
       bind:input="onInput"
       bind:confirm="onConfirm"
       bind:change="onChange"
  />
 
data:{
   minHour: 0,
  maxHour: 24,
  minDate: new Date().getTime(),
  currentDate: new Date().getTime(),
} 
 
 onInput(event) {
  this.setData({
   currentDate: event.detail,
  });
 },

 onChange(event){
 this.setData({
  reserveCopyTime:event.detail.getValues(),
 })
  
 },