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

效果如下:

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

相关文章
|
JSON 数据格式 容器
Layui 内置方法 - layer.photos(相册层)
Layui 内置方法 - layer.photos(相册层)
2330 0
|
10月前
|
大数据 数据处理 PHP
PHP中的数组过滤与映射:高效数据处理技巧
PHP中的数组过滤与映射:高效数据处理技巧
|
JSON 资源调度 JavaScript
nodemon 启动问题:nodemon : 无法将“nodemon”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
【6月更文挑战第3天】在尝试运行`nodemon`时遇到错误,提示无法识别该命令。问题可能是缺少nodemon环境或系统不允许执行脚本。解决方法包括:首先尝试使用`npm install nodemon -g`全局安装nodemon,如果安装失败,可能需要以管理员权限打开PowerShell,执行`set-ExecutionPolicy RemoteSigned`,然后再次尝试安装。nodemon是一款用于Node.js开发的工具,能监控源码变化自动重启应用,常用于提高开发效率。安装后,通过`nodemon your-app.js`启动应用,可自定义配置如监听特定文件、扩展名或目录。
5118 1
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
1148 0
|
前端开发
layui-form
`layui-form`是一个前端表单组件,提供多种表单类型如单行、多行排列的输入框,下拉选择框(支持模糊搜索),单选框和复选框。表单元素可通过`required`和`lay-verify`属性进行必填和验证设置。编辑器如`layedit`可用于富文本输入,表单监听事件如提交和单选器可绑定回调函数进行处理。此外,能动态更新渲染表单,初始化表单数据并进行数据校验,包括自定义验证规则。
915 1
|
JavaScript
layui laydate日期初始化的一些坑
【2月更文挑战第8天】layui laydate日期初始化的一些坑
|
JSON 前端开发 JavaScript
layui-数据表格的实现
`layui`是一个前端UI框架,本文档介绍了如何使用layui创建数据表格。首先展示了三张截图来预览效果,接着讲解了下载layui资源包并导入到项目中的步骤。然后,在新建的web项目中引入layui的CSS和JS文件。文档提供了模拟的JSON数据来展示表格内容。接下来,详细说明了数据表格的实现,包括注意事项和代码实现,强调了`table`标签的`id`与`script`中`elem`的匹配。此外,文档还涵盖了监听头部工具栏和工具条事件的方法,并展示了弹出层的实现,用于添加和编辑表格数据。最后,给出了完整的HTML源码示例。
664 0