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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
JavaScript字符串对象
Jan 14 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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扩展编写点滴 技巧收集
2010/03/09 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python IP地址转整数
2020/11/20 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
授权委托书格式
2014/07/31 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
欢迎词范文
2015/01/27 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL