elementui实现日期和时间的选择

最新推荐文章于 2024-04-14 09:17:44 发布

凌云的视界

最新推荐文章于 2024-04-14 09:17:44 发布

阅读量6.3k

点赞数 3

文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/weixin_38680881/article/details/117421054

版权

本文档详细介绍了如何在Vue项目中利用ElementUI组件库的el-date-picker和el-time-picker实现日期和时间的选择功能。通过设置pickerOptions限制选择范围，并在数据回显时处理时间显示问题，确保时间和日期的正确拼接。在遇到el-time-picker选值不更新的bug时，通过$set方法解决了页面显示问题。

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

elementui实现日期和时间的选择

需求：在项目中期望实现一个日期和时间的选择器(两个框)，时间点默认设置为23：59;如下图

在这里插入图片描述

实现过程

一、引入elementui的el-date-picker和el-time-picker

<el-form-item label="截止时间:" prop="tenderTime">
    <el-date-picker
        v-model="ruleForm.tenderTime"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :editable="false"
        :picker-options="pickerOptions"
    >
    </el-date-picker>
    <el-time-picker
        v-model="ruleForm.timePoint"
        placeholder="选择时间"
        :editable="false"
        format='HH:mm'     
        value-format="HH:mm" 
        @change="changTimePoint" 
    >
    </el-time-picker>
</el-form-item>

二、在data里面限制

 pickerOptions: {
// 时间不让选择今天以前的
    disabledDate(time) {
        return time.getTime() < Date.now() - 24* 60 * 60 * 1000
    },
    ruleForm: 
        tenderTime: "",
        timePoint:"23:59",//设置初始值
    },
},

三、在点击下一步校验表单成功后并拼接日期和时间

this.ruleForm.tenderTime=this.ruleForm.tenderTime+" "+this.ruleForm.timePoint

小插曲

至此，上面的需求已基本实现，但在调试的时候还有一个问题，数据回显的时候el-time-picker赋值后可以重新选值但没办法展示在页面上（选择时页面上值不变但传给后端的值是所选的），解决办法如下：在调接口回显数据的时候做如下处理:

 if(this.backForm.tenderTime.indexOf(" ") != -1){  
    this.$set(this.backForm,"timePoint",this.backForm.tenderTime.split(' ')[1])
    this.$set(this.backForm,"tenderTime",this.backForm.tenderTime.split(' ')[0])
    // this.backForm.timePoint=this.backForm.tenderTime.split(' ')[1]
    // this.backForm.tenderTime=this.backForm.tenderTime.split(' ')[0]
}
this.ruleForm=this.backForm;