Element UI日期选择器el-date-picker设置默认的时刻踩坑

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

---

踩坑经历

使用日期选择器，选择日期时，试图让selectTime能取到选择日期的最后一刻的时间戳。
举例：2023-01-06 23:59:59的时间戳1673020799999

 <el-date-picker
      v-model="selectTime"
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
</el-date-picker>

查看文档看到一个default-time，企图直接设置default-time属性给日期选择组件
企图的实现，下面这样不能实现哦，因为这个字段根本不是用来设置该组件默认时刻的，该字段只对日期范围类型的日期选择器有效；具体详情看官网对该字段的描述

 <el-date-picker
      v-model="selectTime"
      default-time=“23:59:59”
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
</el-date-picker>

实现办法：
因为我的需求是提交的时候，提交日期的最后一刻就行了，因此我可以直接把值转换一下就可以了，项目中用到了dayjs插件，因此此处直接用

const time = dayjs(this.selectTime).endOf('day').valueOf()

如果没有引入dayjs的话，这里提供一种方法

const time = new Date(this.selectTime)
const y = time.getFullYear()
const m = time.getMonth()
const d = time.getDate()

// 得到日期的最后一刻的时间戳
const targetTime = new Date(y, m, d, 23, 59, 59).getTime()

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。