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 { D...
·
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;
}
更多推荐
已为社区贡献5条内容
所有评论(0)