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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
vue debug 二种方法
Sep 16 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
生物学学生自我评价
2014/01/17 职场文书
安全生产标语
2014/06/06 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
项目经理岗位职责
2015/01/31 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
遗愿清单观后感
2015/06/09 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js