element ui组件 el-date-picker设置default-time的默认时间

原创已于 2024-01-29 13:03:19 修改 · 8.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2024-01-29 10:48:52 首次发布

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

本文介绍了在Vue项目中，如何使用el-date-picker组件的default-time属性设置日期时间的默认值，并通过JavaScript函数动态设置为特定时间（如8:00），确保输入值为时间类型。

该文章已生成可运行项目，

default-time ：选择日期后的默认时间值。如未指定则默认时间值为 00:00:00

默认值修改

 <el-form-item label="计划开始时间"  style="width: 100%;" prop="planStartTime">
      <el-date-picker v-model="formData.planStartTime" type="datetime" placeholder="计划开始时间" style="width: 100%" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :default-time='defaultTime(8)'/>
 </el-form-item>

注意：default-time 接受的值必须是时间类型，不能是字符串、数字等类型

js添加事件

const defaultTime = (a) => {
    var now = new Date(); // 获取当前日期和时间
    now.setHours(a); // 设置小时为8（24小时制）
    now.setMinutes(0);
    now.setSeconds(0);
    return now
}