如何设置el-date-picker的默认截止时间为“23:59:59”

最新推荐文章于 2025-03-17 11:22:34 发布

itliujia

最新推荐文章于 2025-03-17 11:22:34 发布

阅读量2.5k

点赞数 6

文章标签： vue

本文链接：https://blog.csdn.net/qq_34913677/article/details/130823394

版权

在Vue项目中，使用el-date-picker组件时，通过`:default-time`设置默认时间范围`[00:00:00,23:59:59]`无效。为了解决这个问题，文章提出了一个计算属性`defaultTimeFormat`，将时间字符串转换为Date对象，从而正确设置日期时间范围选择器的默认值。

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

亲测 default-time="['00:00:00', '23:59:59']" 是无效的。

<el-date-picker
    :default-time="['00:00:00', '23:59:59']"
    v-model="formData.dischargeTime"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
/>

我用的方法

<el-date-picker
    :default-time="defaultTimeFormat"
    v-model="formData.dischargeTime"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
/>

<script>
const defaultTimeFormat = computed(() => {
  const [start, end] = ["00:00:00", "23:59:59"].map(time => {
    const [hour, minute, second] = time.split(":").map(Number);
    return new Date(0, 0, 0, hour, minute, second);
  });
  const dateRange: [Date, Date] = [start, end]
  return dateRange;
});
</script>