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

素颜马尾好姑娘i 2022-10-18 15:58 181阅读 0赞

layui 中默认选择日期的界面如下：  
![日期选择器][20210708162337895.png]

选择时间的界面如下：  
![时间选择器][20210708162352427.png]  
意思就是我们必须要先选择日期，才能选择时间，我们来改装一下：

// 只选时分秒
    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();
    					}
    				}
    			}
    		}
    	}
    });

效果如下：  
![改装后的时间选择器][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]  
原理就是：把用不到的元素给删掉

如您在阅读中发现不足，欢迎留言！！！

[20210708162337895.png]: /images/20221005/5a0f40faf07546a1bcf0690ea78fcd59.png
[20210708162352427.png]: /images/20221005/453e5b2f647d4e69ba7fe2393dfcebcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: /images/20221005/3ce6c22777b449e9a98d76d951f738f1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui checkbox设置只能单选

HTML代码： <fieldset style="border:1px solid 2779aa;height:190px;width:100px;margin

野性酷女/ 2023年10月18日 14:17/ 0 赞/ 128 阅读

相关 layui-laydate时间日历控件详细示例

layui-laydate时间日历控件详细示例 ![426136e8363e68fc321f3d3551b0d579.png][] [豆趣编程][Link 1] 201

旧城等待，/ 2023年10月05日 18:09/ 0 赞/ 22 阅读

相关 Layui 组件化

时代的车轮滚滚向前，哪些属于每个时代的英雄变成了那个时代的印记，就像贤心说的这是一种带有热量的冰冷感！我们选择了 IT 这个行业，自然希望能够在这里走得更远。而那些大神创

浅浅的花香味﹌/ 2023年10月01日 15:48/ 0 赞/ 16 阅读

相关使用layui中layDate时间组件

普通的input框中的type="data"可以是选择时间年月日，具体的时间时没有办法选择的，不知道怎么调，改动起来比较费事也没有什么样式效果， ![在这里插入图片描述

清疚/ 2023年07月13日 03:55/ 0 赞/ 26 阅读

相关 layui的laydate控件的常用属性

目前使用的layui版，没有单独使用laydate。官网上的例子是每个属性单独设置的，我稍微整合了一下常用属性。引入了css和js以后 //初始化时间

约定不等于承诺〃/ 2023年02月25日 08:53/ 0 赞/ 20 阅读

相关 LayUI中laydate组件改装，只选时分秒

layui 中默认选择日期的界面如下： ![日期选择器][20210708162337895.png] 选择时间的界面如下： ![时间选择器][20210708162

素颜马尾好姑娘i/ 2022年10月18日 15:58/ 0 赞/ 182 阅读

相关 layui的laydate实现季度选择

/ 季度初始化 @param ohd 季度input dom对象非jquery对象 / function renderSeas

Myth丶恋晨/ 2022年06月01日 09:13/ 0 赞/ 486 阅读

相关 layui-laydate时间日历控件详细示例

![70][]![70 1][]![70 2][]![70 3][] layui下载地址：[http://www.layui.com/][http_www.layui.com

迷南。/ 2022年05月24日 08:07/ 0 赞/ 468 阅读

相关 layui laydate 时间控件一闪而过

问题：一个页面多次重载时间控件，并且都是不同页面，会导致时间控件绑定了，又被覆盖其他id的时间控件，又重新绑定上去。就会导致点击日期框，弹框一闪而过，从其他弹窗切换回来，又有

- 日理万妓/ 2022年05月21日 06:41/ 0 赞/ 427 阅读

相关 Layui---日历插件Laydate(三)

1 去掉laydate自定义的mark标记，css代码如下： /去掉日历mark标记/ .laydate-day-mark::after{

Myth丶恋晨/ 2021年11月10日 04:32/ 0 赞/ 1076 阅读