laydate重构为周切换

最新推荐文章于 2024-03-29 15:04:22 发布

weixin_34033624

最新推荐文章于 2024-03-29 15:04:22 发布

阅读量1.3k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/leftheart/blog/1929581

版权

2019独角兽企业重金招聘Python工程师标准>>>

上下按钮可以自行更换，如果需要扩展可以自行修复，之所以做这个事情是应为朋友公司提出这个需求，搜索各种日期插件未果之下才自行修改。如有不足之处，请大神批评。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>laydate重构为周切换</title>
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/laydate.js"></script>
    </head>

    <body>
        <div id="test1"></div>
        <!-- 改成你的路径 -->
        <script>
            var dateIndex = 0;
            var dateNowIndex = 0;
            var dateNows = 0;
            var dateTodayObject = null;
            $(function() {
                //laydate重构
                laydate.render({
                    elem: '#test1',
                    position: 'static',
                    ready: function(date) {
                        $(".layui-this").parent().siblings().hide();
                        $(".layui-laydate-footer").hide();
                        $(".layui-laydate-header").find(".laydate-prev-y, .laydate-next-y, .laydate-next-m, .laydate-prev-m").hide();
                        var str = '<i class="layui-icon laydate-icon prevWeek">上</i><i class="layui-icon laydate-icon nextWeek">下</i>';
                        $(".layui-laydate-header").append(str);
                        $(".layui-laydate-header .nextWeek").css("right","45px");
                        $(".layui-laydate-header .prevWeek").css("left","45px");
                        
                        dateTodayObject = $(".layui-this").parent();    //当前日期的元素对象
                        dateIndex = dateTodayObject.index();            //获取当前日期所在行的索引
                        dateNowIndex = dateIndex;                        //当前所在行的索引
                        dateNows = 6;                                    //获取本月总行数
                        
                        //新增下周点击事件
                        $(".nextWeek").click(function(){
                            dateNowIndex++;
                            if(dateNowIndex >= 0 && dateNowIndex < dateNows){
                                dateTodayObject.parent().children().hide();
                                dateTodayObject.parent().children().eq(dateNowIndex).show();
                                dateFristCheck(dateTodayObject, dateNowIndex, 0);
                            }else{
                                $(".laydate-next-m").click();
                                
                                dateTodayObject = $(".layui-laydate-content table tbody").children().eq(0);    //当前日期的元素对象
                                var nowDate = dateTodayObject.children().eq(0).attr("lay-ymd");
                                var oldDate = dateTodayObject.next().children().eq(0).attr("lay-ymd");
                                var nowDates = nowDate.split("-");
                                var oldDates = oldDate.split("-");
                                if(nowDates[1] != oldDates[1]){
                                    dateNowIndex = 0;
                                }else{
                                    dateNowIndex = 1;
                                }
                                dateTodayObject.parent().children().hide();
                                dateTodayObject.parent().children().eq(dateNowIndex).show();
                            }
                        });
                        //新增上周点击事件
                        $(".prevWeek").click(function(){
                            dateNowIndex--;
                            if(dateNowIndex >= 0 && dateNowIndex < dateNows){
                                dateTodayObject.parent().children().hide();
                                dateTodayObject.parent().children().eq(dateNowIndex).show();
                                dateFristCheck(dateTodayObject, dateNowIndex, 1);
                            }else{
                                $(".laydate-prev-m").click();
                                
                                dateTodayObject = $(".layui-laydate-content table tbody").children().eq(4);    //当前日期的元素对象
                                var nowDate = dateTodayObject.children().eq(0).attr("lay-ymd");
                                var oldDate = dateTodayObject.next().children().eq(0).attr("lay-ymd");
                                var nowDates = nowDate.split("-");
                                var oldDates = oldDate.split("-");
                                if(nowDates[1] != oldDates[1]){
                                    dateNowIndex = 4;
                                }else{
                                    dateNowIndex = 3;
                                }
                                dateTodayObject.parent().children().hide();
                                dateTodayObject.parent().children().eq(dateNowIndex).show();
                            }
                        });
                    }
                });

            })
            //检测当月下一行第一个日期是本月日期还是次月日期
            function dateFristCheck(obj, nowIndex, tag){
                var nowObj = obj.parent().children().eq(nowIndex);
                var nowDate = null;
                var oldDate = null;
                if(tag == 0){
                    nowDate = nowObj.children().eq(0).attr("lay-ymd");
                    if(nowIndex <= 1){
                        oldDate = nowObj.prev().children().eq(6).attr("lay-ymd");
                    }else{
                        oldDate = nowObj.prev().children().eq(0).attr("lay-ymd");
                    }
                }else{
                    nowDate = nowObj.children().eq(6).attr("lay-ymd");
                    oldDate = nowObj.next().children().eq(0).attr("lay-ymd");
                }
                
                var nowDates = nowDate.split("-");
                var oldDates = oldDate.split("-");
                
                if(nowDates[1] != oldDates[1]){
                    if(tag == 0){
                        $(".laydate-next-m").click();
                        dateNowIndex = 0;                //获取当前日期所在行的索引
                        dateTodayObject = $(".layui-laydate-content table tbody").children().eq(0);    //当前日期的元素对象
                    }else{
                        $(".laydate-prev-m").click();
                        dateNowIndex = 5;                //获取当前日期所在行的索引
                    }
                    
                    dateTodayObject.parent().children().hide();
                    dateTodayObject.parent().children().eq(dateNowIndex).show();
                }
            }
        </script>
    </body>

</html>

转载于:https://my.oschina.net/leftheart/blog/1929581