vue +vant 之时间选择器

https://youzan.github.io/vant/#/zh-CN/intro  vant 地址

原来的博主  https://blog.csdn.net/Miss_liangrm/article/details/100625386    地址

main.js全局引入  也可以额按需引入，具体看文档，这里是全局引入

import Vue from 'vue';
import { DatetimePicker } from 'vant';

Vue.use(DatetimePicker);

 下面是HTML部分

这个涉及到多个地方使用时间选择器，就可以传参，用用一个

                    <div class="unit-row-style" style="width:100%;">
                        上次乳汁淤积时间:<van-button @click="showPopFn('yuji')" size="mini" style="width:1.5rem;" type="info">选择日期</van-button>
                        <input v-model="patientAssessment.babymonMilkDepositForm.lastTimeFeed" type="text" class="input-text-3" style="width:9rem;"> 
                        <template>
                            <div id="date_time_picker">
                                <van-popup v-model="yujiDilog" position="bottom" :style="{ height: '40%' }">
                                <van-datetime-picker v-model="currentDate" type="datetime" @change="changeFn()" @confirm="confirmFn('yuji')" @cancel="cancelFn()" />
                                </van-popup>
                            </div>
                        </template>
                    </div>

方法部分 methods

  showPopFn(x) {//top
        if(x=="yuji"){
        this.yujiDilog=true
        }
      },
      showPopup() {
        this.yujiDilog = true;
      },
      changeFn() { // 值变化是触发
        this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
      },
      confirmFn(a,index) { // 确定按钮
        if(a=='yuji'){
            this.patientAssessment.babymonMilkDepositForm.lastTimeFeed=this.timeFormat(this.currentDate);
            this.yujiDilog=false
        }
      },
  
       timeFormat(time) { // 时间格式化 2019-09-08
        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 + '月' + day + '日'+ hour + '时'+ minute + '分'
    },

data 定义的变量

  yujiDilog:false,
  currentDate: new Date(),
  changeDate: new Date(),

如果涉及到表格动态加载，可以用index定义

 if(a=="table"){
            console.log(a,index)
            let tableDate=this.patientAssessment.recoveryUpperLymphForm.upperLymphTable;
            tableDate[index].timeValue=this.timeFormat(this.currentDate);
            this.shows = false;
        }