laydate只显示时分 不显示秒的功能实现方法

场景

最近有个需求，需要选择时间段，例如10:00 ~ 12:30。

目前的系统前端用的是layui，时间插件自然是选择了laydate。

查阅了laydate的api发现并没有直接可以设置去掉秒并且分钟只显示整10的配置。

然后就决定动手自己写一下。

layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
          elem: '#scheStartTime'+trindex,
          type:'time',
          trigger:'click',
          format: 'HH:mm',
          btns: ['clear', 'confirm'],
          ready: formatminutes
        });
});

首先设置format为'HH:mm' 格式，去除掉秒的展示。然后在ready中写一个方法，ready的方法会在绑定之前执行。

function formatminutes(date){
      var aa = $(".laydate-time-list li ol")[1];
      var showtime = $($(".laydate-time-list li ol")[1]).find("li");
      for (var i = 0; i < showtime.length; i++) {
        var t00 = showtime[i].innerText;
        if (t00 != "00" && t00 != "10" && t00 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
          showtime[i].hidden = true;
        }
      }
      $($(".laydate-time-list li ol")[2]).find("li").remove(); //清空秒
    }

formatminutes方法中进行移除非整10的分钟(此处最好使用hidden不要使用remove，我发现remove会导致设置最大值最小值时候出现问题)，并且移除掉秒的li。

实现效果如图所示。

以上这篇laydate只显示时分 不显示秒的功能实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui-laydate时间日历控件使用方法详解

    layui-laydate时间日历控件使用方法详解

    本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下 layui下载地址:http://www.layui.com/ 此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title&

  • laydate时间日历插件使用方法详解

    laydate时间日历插件使用方法详解

    本文为大家分享了laydate时间日历插件的使用方法,供大家参考,具体内容如下 1.前言 在处理页面表单的时候,会遇到日期类型的数据,我们可以通过时间插件的让用户来选择具体的时间,这样就会比较方便.今天记录一下laydate这个时间插件. 2.代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>测试时间插件&l

  • layDate日期控件使用方法详解

    layDate日期控件使用方法详解

    本文实例为大家分享了layDate日期控件的使用方法,供大家参考,具体内容如下 效果: 1.引入js文件 <script src="__PUBLIC__/laydate/laydate.js"></script> 2.初始化laydate控件 //日期 var start = { elem: '#start_time',//选择ID为START的input event:'click', format: 'YYYY-MM-DD',//自动生成的时间格式 istim

  • laydate只显示时分 不显示秒的功能实现方法

    场景 最近有个需求,需要选择时间段,例如10:00 ~ 12:30. 目前的系统前端用的是layui,时间插件自然是选择了laydate. 查阅了laydate的api发现并没有直接可以设置去掉秒并且分钟只显示整10的配置. 然后就决定动手自己写一下. layui.use('laydate', function(){ var laydate = layui.laydate; laydate.render({ elem: '#scheStartTime'+trindex, type:'time',

  • TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法

    本文实例讲述了TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法.分享给大家供大家参考,具体如下: 在程序调试的过程中,想要调试显示详细的错误信息,需要修改application\config.php 文件中进行设置,设置两处:把show_error_msg的值false改为true // 显示错误信息 'show_error_msg' => true, 改完以后的提示为: 这种提示看不出哪里出问题,如果要显示详细的错误,要再修改一处: 修改完以后的错误提示变得很详细了. 更多关于

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

  • pandas中的Timestamp只保留日期不显示时间

    pandas中的Timestamp只保留日期不显示时间

    目录 Timestamp只保留日期不显示时间 Timestamp.date() pandas从日期属性中提取年月日 将日期属性拆分成年.月.日 Timestamp只保留日期不显示时间 Timestamp.date() 拿到DataFrame中的一个时间戳后,加一个**.date()**即可 for time in df['日期']):     print(time.date()) pandas从日期属性中提取年月日 在数据挖掘过程中,日期属性是非数值属性, 不能直接输入到模型,将日期属性拆分成年

  • thinkPHP显示不出验证码的原因与解决方法分析

    本文实例讲述了thinkPHP显示不出验证码的原因与解决方法.分享给大家供大家参考,具体如下: 今天到公司,svn update代码后,在浏览器上输入域名后,在验证码那块显示不出,找了半个上午,后来仔细看了下apache的配置文件 <VirtualHost *:80> ServerName admin.exam.com DocumentRoot E:/www/exam/trunk/server/Admin/ <Directory E:/www/exam/trunk/server/apps

  • layer ui插件显示tips时,修改字体颜色的实现方法

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: <script src="/assets/js/layer/layer.js"></script> function showMessage(msg, domObj) { layer.tips(msg, domObj,{tips:3});//弹出框加回调函数 } s

  • JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

    本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法.分享给大家供大家参考,具体如下: 在web开发中,上传文件功能通过type为file的input标签即可实现.但input的显示效果仅为一个按钮,且不能修改UI.如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方: <!DOCTYPE html> <html> <head> <meta http-equiv=&q

  • js实现带关闭按钮始终显示在网页最底部工具条的方法

    本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

  • Tomcat显示8080端口被占用的图文解决方法

    Tomcat显示8080端口被占用的图文解决方法

    大概思路:找到占用端口的进程,通过唯一标识的进程号终止该进程 在控制台中找到端口对应的进程号 在任务管理器中找到服务进程号 然后终止进程 ps:不知道的进程不要乱终止,后果很严重的 win+R-->cmd-->netstat -ao win+R:运行,cmd:打开控制台 netstat-ao:显示活动连接(展示端口号和对应进程号) 在控制台中找到端口对应的进程号 右键任务栏,选择任务管理器 在选项卡中选择详细信息,然后点击PID排序,再找到需要终止的进程号,右键选择结束任务即可 总结 以上所述

  • BootStrap使用popover插件实现鼠标经过显示并保持显示框

    BootStrap使用popover插件实现鼠标经过显示并保持显示框

    在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas

随机推荐