layui 日历不同日期背景颜色

最新推荐文章于 2024-05-21 15:43:31 发布

乐逍遥☺

最新推荐文章于 2024-05-21 15:43:31 发布

阅读量1k

点赞数

分类专栏： # § ➸ ➳ ➻ ➛ ☞ jQuery 文章标签： layui javascript css

本文链接：https://blog.csdn.net/LQZ8888/article/details/125191882

版权

§ ➸ ➳ ➻ ➛ ☞ jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css

/* 日历选中颜色  */
        .layui-laydate .layui-bg01 {
            background-color: #8de7ed !important;
            color: #fff !important;
        }

        .layui-laydate .layui-bg02 {
            background-color: #ccccff !important;
            color: #fff !important;
        }

        .layui-laydate .layui-bg03 {
            background-color: #ffadad !important;
            color: #fff !important;
        }

        .layui-laydate .layui-this {
            background-color: #22cdc9 !important;
            color: #fff !important;
        }

html

</div>

    var timeAll = ["2022-5-31", "2022-6-1", "2022-6-2", "2022-6-3", "2022-7-1", "2022-7-24", "2022-7-29"]; //已交
    var timeIn = ["2022-5-30", "2022-6-6", "2022-6-7", "2022-6-8", "2022-7-9", "2022-7-10", "2022-7-11"]; //未交
    var timePart = ["2022-6-16", "2022-6-13", "2022-6-14", "2022-6-15",]; //补交

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            , position: 'static'
            // , theme: '#22cdc9'
            , showBottom: false
            , ready: function (date) {
                // console.log(dates);
                $('.layui-laydate-content').find("td").each(function (i, e) {
                    // console.log(dates.indexOf($(e).attr('lay-ymd')));
                    if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg01');
                    } else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg02');
                    } else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg03');
                    }

                });
            }
        });
        //回调 标记
        $('.laydate-next-y,.laydate-next-m,.laydate-prev-y,.laydate-prev-m,.laydate-set-ym,.layui-laydate-content').click(function () {
            $('.layui-laydate-content').find("td").each(function (i, e) {
                // console.log(dates.indexOf($(e).attr('lay-ymd')));
                if (!$(e).hasClass('layui-bg01')) {
                    if (timeAll.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg01');
                    }
                    else if (timeIn.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg02');
                    }
                    else if (timePart.indexOf($(e).attr('lay-ymd')) >= 0) {
                        $(e).addClass('layui-bg03');
                    }
                }
            });
        });

         
    });