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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
react同构实践之实现自己的同构模板
Mar 13 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
如何过滤高亮显示非法字符
2006/10/09 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
angularJS 入门基础
2015/02/09 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python递归计算N!的方法
2015/05/05 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
小学生考试获奖感言
2014/01/30 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Python何绘制带有背景色块的折线图
2022/04/23 Python