layui日周月年的日历切换,当选择周时设置每周一可选,其余日期置灰不可选

效果图:

gif


代码:

日期都是放在一个table里面的,每个日期都是一个td,要想设置周一不可选,只需要给其余td都加上class="laydate-disabled",在ready和change的时候都要进行设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    <style>
        .hide {
            display: none;
        }
        .layui-laydate-header {
            background-color: #009688;
        }
        .laydate-set-ym span,
        .laydate-set-ym span:hover {
            color: #fff;
        }

        .layui-laydate-header i.laydate-prev-y,
        .layui-laydate-header i.laydate-next-y,
        .layui-laydate-header i.laydate-prev-m,
        .layui-laydate-header i.laydate-next-m {
            color: #fff;
        }
    </style>
</head>
<body>
    <div>
        <label>
            日:<input type="radio" name="typeChoose" value="date" id="date" checked>
        </label>
        <br>
        <label>
            周:<input type="radio" name="typeChoose" value="week" id="week">
        </label>
        <br>
        <label id="layui-form-label">
            月:<input type="radio" name="typeChoose" value="month" id="month">
        </label>
        <br>
        <label>
            年:<input type="radio" name="typeChoose" value="year" id="year">
        </label>
        <br>
        <label>
            自定义:<input type="radio" name="typeChoose" value="default" id="default">
        </label>
        <br>
    </div>
    <div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="dateBox">
        <!-- 周:只有每月的周一是可选的 -->
        <input type="text" class="layui-input hide" id="weekBox">
        <input type="text" class="layui-input hide" id="monthBox">
        <input type="text" class="layui-input hide" id="yearBox">
        <!-- 自定义 显示年月日 -->
        <input type="text" class="layui-input hide" id="defaultBox">
    </div>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../layui/jquery-1.11.0.min.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#dateBox' //指定元素
            });
        });
        $('input[type=radio][name=typeChoose]').change(function() {
            if (this.value == 'date') {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#dateBox' //指定元素
                    });
                });
                $("#dateBox").removeClass('hide').siblings().addClass('hide');
            }
            else if (this.value == 'week') {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#weekBox', //指定元素
                        ready: function() {
                            $(".layui-laydate-content table tr td:nth-child(1)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(3)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(4)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(5)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(6)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(7)").addClass('laydate-disabled')
                        },
                        change: function() {
                            $(".layui-laydate-content table tr td:nth-child(1)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(3)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(4)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(5)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(6)").addClass('laydate-disabled')
                            $(".layui-laydate-content table tr td:nth-child(7)").addClass('laydate-disabled')
                        }
                    });
                });
                $("#weekBox").removeClass('hide').siblings().addClass('hide');
            }
            else if (this.value == 'month') {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#monthBox', //指定元素
                        type: 'month'
                    });
                });
                $("#monthBox").removeClass('hide').siblings().addClass('hide');
            }
            else if (this.value == 'year') {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#yearBox', //指定元素
                        type: 'year'
                    });
                });
                $("#yearBox").removeClass('hide').siblings().addClass('hide');
            }
            else if (this.value == 'default') {
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#defaultBox', //指定元素
                        type: 'date'
                    });
                });
                $("#defaultBox").removeClass('hide').siblings().addClass('hide');
            }
        });
    </script>
</body>
</html>

附上大神文章链接,看了这篇文章才做出来的,这篇文章改动了laydate.js的源码,实现了laydate的一些特殊需求,比如不可选择秒只能选择小时,分钟,只选每周一等。

猜你喜欢

转载自blog.csdn.net/weixin_43412413/article/details/100553478
今日推荐