效果图:
<van-field input-align="right" readonly v-model="taxTime" @click="handleTaxTime" label="开票时间" placeholder="请选择开票时间" class=" fieldItem"/>
<!-- 开票时间 弹窗-->
<van-popup v-model="showKPTime" position="bottom" :style="{ width: '100%' }" >
<van-datetime-picker
v-model="taxDate"
type="date"
title="选择年月日"
:min-date="minDate"
:max-date="maxDate"
@confirm="handleConfirm"
@cancel="handleCancel"
/>
</van-popup>
自定义方法:utils.js
// 转换成年月日时间格式
const formatDateTime = (date) => {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d
};
export {
formatDateTime
}
main.js引入:
// 引入utils的方法
import * as utils from './utils/util'
Vue.prototype.$utils = utils;
handleTaxTime(){
this.showKPTime = true;
},
handleConfirm(value){
this.taxTime = this.$utils.formatDateTime(value);
this.showKPTime = false;
},
handleCancel(value){
this.taxTime="";
this.showKPTime = false;
},
taxDate:new Date(),
minDate: new Date(2022, 0, 1),
maxDate: new Date(2032, 11, 31),