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();
          }
        }
      }
    }
  }
});

效果如下:

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

目录
相关文章
|
8月前
|
JavaScript
layui二级联动
layui二级联动
|
8月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
8月前
|
JavaScript 前端开发
原生js做三级联动
原生js做三级联动
38 0
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
5009 0
|
8月前
|
JavaScript
uniapp用picker实现自定义三级联动(children)
uniapp用picker实现自定义三级联动(children)
194 0
ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字
当我们使用 ElementUI 构建表单页面的时候,经常需要使用到复合型输入框,可前置或后置元素,一般为标签或按钮,作为该输入框的说明性文字。
1191 0
ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字
|
JavaScript 前端开发
mui 日期控件的用法
mui 日期控件的用法
194 0
【Layui】时间日期控件
【Layui】时间日期控件
548 0
【Layui】时间日期控件