Element UI 的 DatePicker 日期选择器选择的日期区间包含选择日全天

最新推荐文章于 2024-05-11 14:31:22 发布

小明同学呀

最新推荐文章于 2024-05-11 14:31:22 发布

阅读量859

点赞数 1

CC 4.0 BY-SA版权

文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/weixin_48102654/article/details/122553375

本文介绍如何使用ElementUI的DatePicker组件设置日期区间，确保所选日期包含全天时间。通过添加value-format属性和default-time属性实现从00:00:00到23:59:59的时间覆盖。

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

Element UI 的 DatePicker 日期选择器选择的日期区间包含选择日的全天

需添加俩个属性:
value-format=“yyyy-MM-dd HH:mm:ss”
:default-time="[‘00:00:00’, ‘23:59:59’]"

<el-form-item label="时间区间" prop="sendTime">
 <el-date-picker
    v-model="form.sendTime"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</el-form-item>

注意: hh代表是12小时制，HH表示24小时制

效果如下:
在这里插入图片描述