Vue Vant-ui DatetimePicker实现时间选择

本文介绍了如何在Vue应用中使用van-field和van-popup组件创建自定义开票时间选择器,通过formatDateTime函数将用户选择的日期格式化为'年-月-日',并展示了handleTaxTime、handleConfirm和handleCancel方法的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图:

<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),

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值