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只显示时分 不显示秒的功能实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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
-
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时间日历插件的使用方法,供大家参考,具体内容如下 1.前言 在处理页面表单的时候,会遇到日期类型的数据,我们可以通过时间插件的让用户来选择具体的时间,这样就会比较方便.今天记录一下laydate这个时间插件. 2.代码展示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>测试时间插件&l
-
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只保留日期不显示时间
目录 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实现自定义上传图片按钮并显示图片功能的方法.分享给大家供大家参考,具体如下: 在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端口被占用的图文解决方法
大概思路:找到占用端口的进程,通过唯一标识的进程号终止该进程 在控制台中找到端口对应的进程号 在任务管理器中找到服务进程号 然后终止进程 ps:不知道的进程不要乱终止,后果很严重的 win+R-->cmd-->netstat -ao win+R:运行,cmd:打开控制台 netstat-ao:显示活动连接(展示端口号和对应进程号) 在控制台中找到端口对应的进程号 右键任务栏,选择任务管理器 在选项卡中选择详细信息,然后点击PID排序,再找到需要终止的进程号,右键选择结束任务即可 总结 以上所述
-
BootStrap使用popover插件实现鼠标经过显示并保持显示框
在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas
随机推荐
- js实现搜索框关键字智能匹配代码
- 再发几个ASP不错的函数
- windows无法启动MySQL服务报错1067的解决方法
- AJAX跨域请求之JSONP获取JSON数据
- 用批处理得到每个目录占用的空间
- VS2012/VS2013本地发布网站问题集锦(HTTP错误代码)
- Hyper-V 与 VMware比较哪个好用
- 学习PHP的数组总结【经验】
- PHP进程通信基础之信号
- 修改destoon会员公司的伪静态中的com目录的方法
- 关于sql server批量插入和更新的两种解决方案
- PHP之将POST数据转化为字符串的实现代码
- jQuery中:focus选择器用法实例
- 模拟用户操作Input元素,不会触发相应事件
- 注意!公安部列出的恶意网站黑名单
- Android自定义ViewGroup之实现FlowLayout流式布局
- Cisco路由器上配置pppoe拨号
- Spring Boot的应用启动与关闭的方法
- Spring Boot 连接LDAP的方法
- 易语言从前或从后寻找指定字节集