layui实现支持单月的时间选择

Layui框架提供了多款功能强大的日期筛选控件。然而，在实际应用中，经常需要实现仅对当前月份进行日期范围筛选。本文档旨在通过JavaScript扩展已有的Layui日期范围筛选功能，以实现单月份的日期范围筛选需求。具体的实现方法是在Layui提供的日期筛选基础上，通过控制页面属性来动态渲染所需的效果。

渲染效果如下：

实现：

1、首先选择以下layui提供的基础模板；

图源截至layui官网：layDate - JS 日期和时间选择器组件/插件 - 在线演示 - Layui (layuiweb.com)

2、js中赋予时间控件点击事件，再创建时间监听；

       /**
         * 时间监听-部署在控件的点击事件下
         */
        function clearDateFormat() {
            var timer = setInterval(function () {
                //选中需要渲染的时间控件
                let index = 'layui-laydate1';
                //监听是否抓取到控件的id
                if (document.getElementById(index)) {
                    // 抓取到后便清除定时监听
                    clearInterval(timer) 
                    //选中
                    let laydateId = $(document.getElementById(index));
                    //去除以下class
                    laydateId.removeClass('layui-laydate-range');
                    //去除去除下个月份的内容，仅保留当前月份
                    laydateId.find('.laydate-main-list-1').attr('style','display:none')
                }
            }, 10);
        }