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

目录
  • 前言
  • 自定义完时间格式
  • yyyy-MM-dd hh:mm:ss是12小时制
  • yyyy-MM-dd HH:mm:ss才是24小时制
  • 结语

前言

最近在工作中用到了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日期时间选择器选不中内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI日期选择器时间选择范围限制的实现

    目录 单个输入框的 情景1: 设置选择今天以及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择今天之后的日期(不能选择当天时间) 两个输入框 情景1: 限制结束日期不能大于开始日期 ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充. 单个输入框的 组件代码: <el-date-picker v-mod

  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

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

    目录 前言 自定义完时间格式 yyyy-MM-dd hh:mm:ss是12小时制 yyyy-MM-dd HH:mm:ss才是24小时制 结语 前言 最近在工作中用到了element-ui的el-date-picker日期时间选择器,遇到了一个小问题,设置完自定义完时间格式后选不中12小时以后的时间.甚是苦恼,最后发现是设置的时间格式有取值范围.虽然不是什么大问题,但是不细心很容易掉坑,所以总结分享出来给大家避坑. 自定义完时间格式 在el-date-picker标签上设置value-format

  • Element ui 下拉多选时新增一个选择所有的选项

    项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"

  • Java时间类Date类和Calendar类的使用详解

    起因:写代码的时候经常会用到获取当前时间戳和日期,现总结如下 public void testDate() { //SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");//设置日期格式 Date date = new Date(); String dateString = date.toString(); long times = date.getTime(); System.out.println("date.t

  • CI框架（ajax分页，全选，反选，不选，批量删除）完整代码详解

    CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而"优雅"的工具包,它可以为开发者们建立功能完善的 Web 应用程序.是比较主流的一个PHP框架. 下面给大家介绍CI框架(ajax分页,全选,反选,不选,批量删除)完整代码,具体代码如下所示: //ajax分页+搜索(视图层) function ajax_page(page){ var sou = $('#sou').val(); $.ajax({ type: "POST", dataTyp

  • 关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

    数据库中为datetime类型,.net读取数据已Json格式发回给前台页面:例如:使用bootstrap表格插件Ⅹ formatter: function (value, row, index) { var date = new Date(parseInt(value.slice(6))); return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + date.getDate() + " " + da

  • 复选框和Struts2后台交互代码详解

    本文研究的主要是Struts框架中复选框的相关内容.复选框在web开发中用的非常广泛,具体介绍如下. 案例 如下图,当前为用户选中的水果为"香蕉",点击按钮,跳转到修改界面进行修改. 跳转到修改界面后要回显用户的选择(香蕉),然后由用户再次进行勾选,如图: 前台界面: <body> <form action="checBoxAction_test.action" method="post"> 请选择您喜欢的水果:<b

  • Python生成验证码、计算具体日期是一年中的第几天实例代码详解

    1.约瑟夫环问题 <幸运的基督徒> 有15个基督徒和15个非基督徒在海上遇险,为了能让一部分人活下来不得不将其中15个人扔到海里面去,有个人想了个办法就是大家围成一个圈,由某个人开始从1报数,报到9的人就扔到海里面,他后面的人接着从1开始报数,报到9的人继续扔到海里面,直到扔掉15个人.由于上帝的保佑,15个基督徒都幸免于难,问这些人最开始是怎么站的,哪些位置是基督徒哪些位置是非基督徒. def main(): ''' 先用列表中每个数字代表每个人,然后通过循环替换列表中的数字 用@代表基督徒

  • Python3时间转换之时间戳转换为指定格式的日期方法详解

    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换.所谓时间戳,就是从 1970年1月1日 00:00:00 到现在的秒数.原来我也写过关于python3里面如何进行时间转换. 在Python里,时间戳可以通过 time 模块里的 time() 方法获得,比如: import time timestamp = time.time() print(timestamp) 输出结果: 1551077515.952753 这个数可以这么理

  • PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解

    在很多场合为了显示出信息的及时性,一般会将时间显示成"刚刚","5分钟前","3小时前"等,而不是直接将时间打印出来.比如微博,SNS类应用就最长用到这个功能.而一般存储在数据库中的时间格式为 Unix时间戳,所以这里记录一个将 Unix时间戳 转化为时间轴显示的PHP函数.函数比较简单,直接看代码就很好懂了. 复制代码 代码如下: <?phpdate_default_timezone_set('PRC');$date = "13

  • element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式

    目录 发现错误 解决 补充:el-date-picker 初始化报错 总结 发现错误 这两天在写新项目的时候,遇到了element ui 时间日期选择器一直报错 [Vue warn]: Avoid mutating a prop directly since the value will beoverwritten whenever the parent component re-renders.Instead, use a data or computed property based on

随机推荐