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 相关文章推荐
Js注册协议倒计时的小例子
Jun 24 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
vue filters的使用详解
2018/06/11 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python中文竖排显示的方法
2015/07/28 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Django-imagekit的使用详解
2020/07/06 Python
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
计算机专业自荐信
2014/05/24 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis