element ui 日期组件实现仅显示日期选择但值包含固定的时间

蓓蕾心晴

发布于 2025-09-02 08:16:19

17300

代码可运行

文章被收录于专栏：前端小叙前端小叙

运行总次数：0

代码可运行

需求

如标题所述，element ui 日期组件实现仅显示日期选择但值包含固定的时间，便于传给后端使用，通常为 '00:00:00', '23:59:59'

实现

 <div class="date-picker-with-label">
          <el-date-picker size="small" v-model="upTime" type="daterange"
            align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" clearable>
          </el-date-picker>
          <span class="text">提交日期</span>
</div>

这里的 format 是输入框展示的值的格式

value-format 是获取的值的格式

:default-time 是默认的时间值，不设置默认是 00:00:00 - 00:00:00

以此配合即可实现获取的开始和结束的日期都带有时间，举例：2025-09-01 00:00:00

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除

format