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 禁止复制网页
Jun 11 Javascript
MooTools 1.2介绍
Sep 14 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
如何编写高质量JS代码
Dec 28 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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中的加密功能
2006/10/09 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python实现学生通讯录管理系统
2021/02/25 Python
公务员培训心得体会
2013/12/28 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
师德师风个人整改措施
2014/10/27 职场文书
个人借款协议书范本
2014/11/17 职场文书
大雁塔导游词
2015/02/04 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python