关于element-ui日期时间选择器选不中12小时以后的时间详解
更新时间：2022年08月11日 10:57:45 作者：爱划水de鲸鱼哥
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下
前言
最近在工作中用到了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日期时间选择器，修改时间格式几乎是必要的。但修改时间格式要注意一下对应的取值范围。
通常我们最后的格式就是这样的：
yyyy-MM-dd hh:mm:ss是12小时制
但是，要注意，自定义时间日期格式为yyyy-MM-dd hh:mm:ss是12小时制的，也就是后选不中12:00以后时间的。
如图所示：选择14点后变为2点。
各格式的取值范围：
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小时之后的时间。
示例代码：
<div class="block">
<el-date-picker
v-model="plan.runTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</div>结语
到此这篇关于element-ui日期时间选择器选不中12小时以后的时间的文章就介绍到这了,更多相关element-ui日期时间选择器选不中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
看了一些 Vue3 的组件库源码,发现无一例外都使用的jsx/tsx来实现,而且实现方式也各不相同,下面这篇文章主要给大家介绍了关于如何在vue3中优雅的使用jsx/tsx的相关资料,需要的朋友可以参考下2022-10-10
vue jsx 使用指南及vue.js 使用jsx语法的方法
这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
这篇文章主要介绍了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信实现上层的功能，文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter，,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了Vue中实现权限控制的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
Vue+ElementUI 封装简易PaginationSelect组件的详细步骤
这篇文章主要介绍了Vue+ElementUI 封装简易PaginationSelect组件,这里简单介绍封装的一个Pagination-Select组件几个步骤，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue项目之数量占比进度条实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要帮助大家简单理解vue中实例属性vm.$els,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了Vue中使用js-cookie详情，文章围绕js-cookie的相关资料展开详细内容具有一定的的参考价值，需要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了简单了解vue中父子组件如何相互传递值（基础向）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论