jquery移动端实现阶段日历（非整年整月，只一个周期）

jquery移动端实现阶段日历（非整年整月，只一个周期）

如有更好的解决方案，欢迎留言讨论切磋~

不知道能不能看懂标题。。。实在不知该怎么用标题描述。。。本文实现的是20天的移动端日历，能选择，带左右翻页，主要用于一个周期内选择时间，不需要展示整年整月以及农历，节假日。

下边上图以便更好理解本文内容。

HTML

div布一个表格，10天为一个展示，并列两个，可左右切换，可选择
css代码有需要的可以留言这里就不上css了

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="time clearfix">
                <div class="time_td "><span>周五</span>
                    <p>09-02</p>
                </div>
                <div class="time_td"><span>周六</span>
                    <p>09-03</p>
                </div>
                <div class="time_td"><span>周日</span>
                    <p>09-04</p>
                </div>
                <div class="time_td choice_no"><span>周一</span>
                    <p>09-05</p>
                </div>
                <div class="time_td"><span>周二</span>
                    <p>09-06</p>
                </div>
                <div class="time_td"><span>周三</span>
                    <p>09-07</p>
                </div>
                <div class="time_td"><span>周四</span>
                    <p>09-08</p>
                </div>
                <div class="time_td"><span>周五</span>
                    <p>09-09</p>
                </div>
                <div class="time_td"><span>周六</span>
                    <p>09-10</p>
                </div>
                <div class="time_td"><span>周日</span>
                    <p>09-11</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">

            <div class="time clearfix">
                <div class="time_td"><span>周一</span>
                    <p>09-12</p>
                </div>
                <div class="time_td"><span>周六</span>
                    <p>09-13</p>
                </div>
                <div class="time_td"><span>周日</span>
                    <p>09-14</p>
                </div>
                <div class="time_td"><span>周一</span>
                    <p>09-15</p>
                </div>
                <div class="time_td"><span>周二</span>
                    <p>09-16</p>
                </div>
                <div class="time_td"><span>周三</span>
                    <p>09-17</p>
                </div>
                <div class="time_td"><span>周四</span>
                    <p>09-18</p>
                </div>
                <div class="time_td"><span>周五</span>
                    <p>09-19</p>
                </div>
                <div class="time_td"><span>周六</span>
                    <p>09-20</p>
                </div>
                <div class="time_td"><span>周日</span>
                    <p>09-21</p>
                </div>
            </div>
        </div>
    </div>
</div>

js

哪个都是干嘛的注释上都有，这里就不写了

/********************时间页面切换********************/
//==================右
$("#yuejia").click(function() {
    $(this).addClass("opacity");
    $("#yuejian").removeClass("opacity");
    $(".swiper-slide:first").animate({
        left: "-100%"
    });
    $(".swiper-slide:last").animate({
        right: "99%"
    })
});
//==================左
$("#yuejian").click(function() {
    $(this).addClass("opacity");
    $("#yuejia").removeClass("opacity");
    $(".swiper-slide:first").animate({
        left: "0%"
    });
    $(".swiper-slide:last").animate({
        right: "0%"
    })
});
/********************时间选择********************/
$(".time_td").click(function() {

    if($(this).hasClass("choice_no")) {
        $(this).removeClass("choice_yes");
    } else {
        $(this).addClass("choice_yes").siblings().removeClass("choice_yes");
        $(this).addClass("choice_yes").parents().siblings().find(".time_td").removeClass("choice_yes");
    }
});
/********************弹框选择********************/
$(".choice_time li .choice").click(function() {
    $(this).addClass("choice_yes").siblings().removeClass("choice_yes");
});
$(".im_tab p").click(function() {
    $(this).addClass("active").siblings().removeClass("active");
    $(".date").eq($(this).index()).show().siblings(".date").hide();
    $(".tab").eq($(this).index()).addClass("active").siblings().removeClass("active");
});
/********************日期********************/
/********************************************/
var day = new Date()
var weekday = new Array(7)
weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六", ]
var week = day.getDay(); //获取当前星期
var year = day.getFullYear(); //年
var mon = day.getMonth() + 1; //获取当前月份
var days = day.getDate(); //获取当前日数
var leap_year = year % 4 //判断是否为闰年
var time_s = $(".time_td span");
var l_today = $("#l_today");
var time_p = $(".time_td p");
/********************日历周几赋值********************/
for(var i = 0; i < 20; i++) { //20天一循环
    var week2 = 0;
    week2 = (week + i) % 7;// 求余
    time_s.eq(i).html(weekday[week2]);
}
/********************日历日期表赋值********************/
for(var j = 0; j < 20; j++) {
    days_f = parseFloat(days) + j;
    if(mon == 2 && leap_year == 0) { //闰年闰月
        //alert("润二月")
        if(days_f > 29) {
            days_f = parseFloat(days_f) - 29;
            mon2 = parseFloat(mon) + 1;
            time_p.eq(j).html(mon2 + "-" + days_f);
        } else {
            time_p.eq(j).html(mon + "-" + days_f);
        }
    } else if(mon == 2 && leap_year != 0) {
        //alert("平二月")
        if(days_f > 28) {
            days_f = parseFloat(days_f) - 28;
            mon2 = parseFloat(mon) + 1;
            time_p.eq(j).html(mon2 + "-" + days_f);
        } else {
            time_p.eq(j).html(mon + "-" + days_f);
        }
    } else if(mon == 4 || mon == 6 || mon == 9 || mon == 11) {
        //alert("30天")
        if(days_f > 30) {
            days_f = parseFloat(days_f) - 30;
            mon2 = parseFloat(mon) + 1;
            time_p.eq(j).html(mon2 + "-" + days_f);
        } else {
            time_p.eq(j).html(mon + "-" + days_f);
        }
    } else {
        //alert("正常")
        if(days_f > 31) {
            days_f = parseFloat(days_f) - 31;
            mon2 = parseFloat(mon) + 1;
            time_p.eq(j).html(mon2 + "-" + days_f);
        } else {
            time_p.eq(j).html(mon + "-" + days_f);
        }
    }
}
/********************标题日期********************/
$("#today").html(mon + "-" + days);
if(mon == 4 || mon == 6 || mon == 9 || mon == 11) { //判断当月天数为30天
    if(days <= 11) {
        days = parseFloat(days) + 19;
        l_today.html(mon + "-" + days);
    } else {
        days = parseFloat(days) + 19 - 30;
        if(mon == 12) {
            mon = 1

            l_today.html(mon + "-" + days);
        } else {
            mon = parseFloat(mon) + 1;
            l_today.html(mon + "-" + days);
        }
    }
} else if(mon == 2) { //判断二月份是否闰年
    if(leap_year == 0) {
        if(days <= 10) {
            days = parseFloat(days) + 19;
            l_today.html(mon + "-" + days);
        } else {
            days = parseFloat(days) + 19 - 29;
            mon = parseFloat(mon) + 1;
            l_today.html(mon + "-" + days);
        }
    } else {
        if(days <= 9) {
            days = parseFloat(days) + 19;
            l_today.html(mon + "-" + days);
        } else {
            days = parseFloat(days) + 19 - 28;
            mon = parseFloat(mon) + 1;
            l_today.html(mon + "-" + days);
        }
    }
} else { //31天的月份
    if(days <= 12) {
        days = parseFloat(days) + 19;
        l_today.html(mon + "-" + days);
    } else {
        days = parseFloat(days) + 19 - 31;
        if(mon == 12) {
            mon = 1
            l_today.html(mon + "-" + days);
        } else {
            mon = parseFloat(mon) + 1;
            l_today.html(mon + "-" + days);
        }

    }
}