calendar日期插件

calendar日期插件

;(function ($) {
    $.fn.extend({
        calendar: function (opt) {
            opt = jQuery.extend({
                year: "",
                month: "",
                date: "",
                //prevClick: "",
                // nextClick: "",
                dayClick: ""
            }, opt);
            var th = $(this);
            var html = "";
            var d = new Date();
            var year = opt.year ? opt.year : d.getFullYear();
            var month = opt.month ? opt.month : d.getMonth() + 1;
            var calendar = {
                getWeek: function (y, m) {
                    //根据年月取得当前月第一天是星期几，月分从0开始
                    return new Date(y, m - 1, 1).getDay();
                },
                getday: function (y, m) {
                    //根据年月取得当前月的天数，有可能会取上一个月的天数，
                    //如果当前月份为1，上一月即去年12月
                    if (m == 0) {
                        m = 12;
                        y = y - 1;
                    }
                    return new Date(y, m, 0).getDate();
                },
                getmain: function (y, m) {
                    var html = "";
                    var week = this.getWeek(y, m);
                    var day = this.getday(y, m);//当前月共有天数
                    var lastday = this.getday(y, m - 1);//上月的天数
                    html += '<ul>';
                    //上月剩余的天数
                    for (var i = (lastday - week + 1); i <= lastday; i++) {
                        //html += '<li class="gray" data-date="' + this.getstringdata(0, y, m, i) + '"><span>' + i + '</span></li>';
                        html += "<li>&nbsp;</li>";
                    }
                    //当前月
                    for (var i = 1; i <= day; i++) {
                        var d = new Date();
                        var cls = '';
                        if (d.getFullYear() == y && d.getMonth() + 1 == m && d.getDate() == i) {//当天
                            cls = "today active";
                        }
                        var ymd = this.getstringdata(1, y, m, i);
                        if ($.inArray(ymd, opt.date) != -1) {
                            cls += "optional";
                        }
                        html += '<li data-date="' + ymd + '" class="' + cls + '"><span>' + i + '</span></li>';
                    }
                    //如果小于42，往下个月推算
                    var nextmonth = 0;
                    //如果5行能显示完当前月的就不显示6行了
                    if (week + day <= 35) {
                        nextmonth = 35;
                    } else if (week + day > 35) {
                        nextmonth = 42;
                    }
                    /*for (var i = 1; i <= ( nextmonth - week - day); i++) {
                     html += '<li class="gray" data-date="' + this.getstringdata(2, y, m, i) + '"><span>' + i + '</span></li>';
                     }*/
                    html += '</ul>';
                    return html;
                },
                changnum: function (n) {
                    //将1位数前面补0转为两位
                    if (n < 10) {
                        n = "0" + n;
                    }
                    return n.toString();
                },
                getstringdata: function (t, y, m, d) {
                    //返回日期字符串,类型年月日是
                    if (t == 0) {
                        //上月
                        if (m == 1) {
                            m = 12;
                            y = y - 1;
                        } else {
                            m = m - 1;
                        }
                    } else if (t == 1) {
                        //当前月
                    } else if (t == 2) {
                        //下月
                        if (m == 12) {
                            m = 1;
                            y = y + 1;
                        } else {
                            m = m + 1;
                        }
                    }
                    return y + "-" + this.changnum(m) + "-" + this.changnum(d);
                },
                getheader: function (y, m) {
                    var html = '<div class="control">';
                    html += '<a class="prev" href="javascript:;">&lt;</a>';
                    html += '<div class="date">' + y + '年' + m + '月</div>';
                    html += '<a class="next" href="javascript:;">&gt;</a>';
                    html += '</div>';
                    html += '<ul class="header clearfix">';
                    html += '<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li> <li>六</li></ul>';
                    return html;
                }
            };

            th.append(calendar.getheader(year, month));
            th.append('<div class="date-list clearfix"></div>');
            th.children(".date-list").html(calendar.getmain(year, month));
            th.on("click", '.control .prev', function () {
                month = month - 1;
                if (month == 0) {
                    month = 12;
                    year = year - 1;
                }
                th.children(".control").children(".date").html(year + "年" + month + "月");
                th.children(".date-list").html(calendar.getmain(year, month));
            });
            th.on("click", '.control .next', function () {
                month = month + 1;
                if (month > 12) {
                    month = 1;
                    year = year + 1;
                }
                th.children(".control").children(".date").html(year + "年" + month + "月");
                th.children(".date-list").html(calendar.getmain(year, month));
            });
            th.on("click", '.date-list .optional', function () {
                var t=$(this);
                t.addClass("active").siblings().removeClass("active");
                opt.dayClick(t.data("date"));
            });
        }
    })
})(jQuery);


/*引用*/
 $("#calendar").calendar({
                year: "2017",
                month: "04",
                date: ['2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15', '2017-02-16', '2017-02-17', '2017-02-20', '2017-02-21'],//可选日期
                dayClick: function (d) {
                    console.log(d);
                }
            });