laydate 时间选择框显示时分不显示秒只显示10分

最新推荐文章于 2024-08-28 11:47:01 发布

原创最新推荐文章于 2024-08-28 11:47:01 发布 · 置顶 · 1.8w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#laydate #format minutes #javascript #delete second

format minutes 同时被 2 个专栏收录

1 篇文章

订阅专栏

laydate

1 篇文章

订阅专栏

本文介绍如何修改laydate插件以实现特定的时间选择需求，包括仅显示小时和十分钟单位的分钟，通过调整样式和使用自定义函数隐藏不必要的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是想实现以上的画面。 laydate里的表中画面是时分秒，时间是01-23，分-秒是00-59。一些场景并不适用。

我这边只需要显示时间，分（10分单位）

我参照了laydate的官方文档以及fly讨论社区的内容（感谢感谢），实现了这个处理。

（0）使用插件的版本

laydate-v5.0.9

jquery-1.12.3.js

（1）不显示秒的方法。

<style type="text/css">
		.layui-laydate-content>.layui-laydate-list {
	            padding-bottom: 0px;
	            overflow: hidden;
	        }
	        .layui-laydate-content>.layui-laydate-list>li{
	            width:50%
	        }

			.merge-box .scrollbox .merge-list {
			    padding-bottom: 5px;
			}

</style>

（2） laydate的声明

laydate.render({
			  elem: '#endTime'
			  ,type: 'time'
			  ,format: 'HH:mm'
				  ,btns: ['clear', 'confirm']
			  ,ready: formatminutes

});
		
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 != "20" && t00 != "30" && t00 != "40" && t00 != "50") {
                    showtime[i].remove()
           }
     }
     $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
}

（3）参照文件（特别感谢）

https://www.jianshu.com/p/72fda0d0c310

https://www.layui.com/doc/modules/laydate.html

（4）最后

最好是通过修改源码可以实现是最好的。但是时间水平有限，只能用最快的方式实现。

以上只是测试用的代码，不完善的地方请望见谅！！！

我的博客：

* [腾讯云站点](博客)

* [gitHub站点](https://12345zp.github.io)