Vue Vant-ui DatetimePicker实现时间选择

船长在船上

于 2022-05-17 07:45:00 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 前端开发文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/124795113

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

本文介绍了如何在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),