element-ui 日期时间选择器选不中12小时以后的时间

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情

前言

最近在工作中用到了element-ui的el-date-picker日期时间选择器,遇到了一个小问题,设置完自定义完时间格式后选不中12小时以后的时间。甚是苦恼,最后发现是设置的时间格式有取值范围。虽然不是什么大问题,但是不细心很容易掉坑,所以总结分享出来给大家避坑。

自定义完时间格式

在el-date-picker标签上设置value-format属性,可以设置时间格式。

<el-date-picker value-format="yyyy-MM-dd hh:mm:ss" </el-date-picker>

使用el-date-picker日期时间选择器,修改时间格式几乎是必要的。但修改时间格式要注意一下对应的取值范围。

通常我们最后的格式就是这样的:

image.png

yyyy-MM-dd hh:mm:ss是12小时制

但是,要注意,自定义时间日期格式为yyyy-MM-dd hh:mm:ss是12小时制的,也就是后选不中12:00以后时间的。

如图所示:选择14点后变为2点。

image.png

各格式的取值范围:

image.png

yyyy-MM-dd HH:mm:ss才是24小时制

如图所知,yyyy-MM-dd hh:mm:ss格式时12小时制,要使用24小时制应该使用yyyy-MM-dd HH:mm:ss格式。

value-format属性修改为yyyy-MM-dd HH:mm:ss格式,即可选中12小时之后的时间。

image.png 示例代码: ```

```

结语

本文到此结束

如果大家还有什么其他想法,欢迎在评论区交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱划水de鲸鱼哥~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值