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


Posted in Javascript onSeptember 28, 2019

场景

最近有个需求,需要选择时间段,例如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只显示时分 不显示秒的功能实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 #Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 #Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 #Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
You might like
PHP的autoload机制的实现解析
2012/09/15 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python实现网站表单提交和模板
2019/01/15 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python hough变换检测直线的实现方法
2019/07/12 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
社区学习十八大感想
2014/01/22 职场文书
公共场所禁烟标语
2014/06/25 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
财务统计员岗位职责
2015/04/14 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers