LayUI中laydate组件改装,只选时分秒

简介: 我们必须要先选择日期,才能选择时间

layui 中默认选择日期的界面如下:

选择时间的界面如下:

意思就是我们必须要先选择日期,才能选择时间,我们来改装一下:

// 只选时分秒
laydate.render({
  // 绑定元素
  elem: '#test1',
  // 类型:时间
  type: 'time',
  // 格式:时分秒
  format: 'HH:mm:ss',
  ready: function(date) {
    let dom = $(".laydate-time-list").children("li");
    for(let i = 0; i < dom.length; i++) {
      if(i == 2 || i == 5) {
        let li = $(dom[i]).children("ol").children("li")
        for(let j = 0; j < li.length; j++) {
          if($(li[j]).text() != '00') {
            $(li[j]).remove();
          }
        }
      } else if(i == 1 || i == 4) {
        let li = $(dom[i]).children("ol").children("li")
        for(let j = 0; j < li.length; j++) {
          if($(li[j]).text() != '00') {
            $(li[j]).remove();
          }
        }
      }
    }
  }
});

效果如下:

原理就是:把用不到的元素给删掉

目录
相关文章
|
1月前
|
JavaScript
layui二级联动
layui二级联动
|
1月前
|
JavaScript 前端开发
原生js做三级联动
原生js做三级联动
19 0
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
4931 0
|
1月前
|
JavaScript
layui laydate日期初始化的一些坑
【2月更文挑战第8天】layui laydate日期初始化的一些坑
|
1月前
|
JavaScript
uniapp用picker实现自定义三级联动(children)
uniapp用picker实现自定义三级联动(children)
79 0
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
673 0
mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
160 0
【Layui】时间日期控件
【Layui】时间日期控件
518 0
【Layui】时间日期控件
|
数据库
layui时间选择器点击事件
最近写了一个项目用到了layui框架,其中在用到时间选择器控件的时候想做一个点击一个时间可以触发一个事件,然后这个事件可以获取点击的时间,最终通过获取的时间来进行数据库查找,但是无奈怎样也触发不了点击事件,网上同题目的博客很多,大多不是这个问题,接下来我就说一下我是怎么解决的。
289 0
layui时间选择器点击事件