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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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 flush类输出缓冲剖析
2008/10/19 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python验证企业工商注册码
2015/10/25 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Django框架安装方法图文详解
2019/11/04 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
合伙协议书范本
2014/04/21 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
党支部意见范文
2015/06/02 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL