function DatePicker() { this.opts = null; this.today = new Date(); //今天 this.todayDate=this.today.getDate(); this.currentDate = new Date(); //当前选中日期 } DatePicker.prototype.init = function(opts) { var opts = $.extend({ 'min_date':"1970-01-01", "yearOffset": 20//默认往前推20年 }, opts || {}); this.opts = opts; this.renderCalendar(); this.bindEvent(); };
事件处理
DatePicker.prototype.bindEvent = function() { var self = this; self.opts.container.on("change", ".year-select", function() { self.renderSelectedDate(); }); //选中月份 self.opts.container.on("change", ".month-select", function() { self.renderSelectedDate(); }); //下一月 self.opts.container.on("click", ".next-btn", function(e) { e.stopPropagation(); var cur_date =self.currentDate.setMonth(self.currentDate.getMonth()+1);; self.setCurrentDate(cur_date); }); //上一月 self.opts.container.on("click", ".prev-btn", function(e) { e.stopPropagation(); var cur_date = self.currentDate.setMonth(self.currentDate.getMonth()-1); self.setCurrentDate(cur_date); }); //选择日历中某一天 self.opts.container.on("click", ".date-item", function() { if (!$(this).hasClass("disabled")) { var _day = $(this).attr("date"); var cur_date = self.currentDate.setDate(_day); self.setCurrentDate(cur_date); } }); };
定义临时存储的当前日期，默认日期是今天，但是选择的时候当前日期会变化。
//临时被选中的日期 DatePicker.prototype.tempActiveDate=(function(){ var _date=new Date(); return { getDate: function() { return _date; }, setDate:function(date){ _date=new Date(date); } }; })();
年月下拉框变化时更新日期
//设置下拉框选中的日期 DatePicker.prototype.renderSelectedDate = function() { var _year = this.opts.container.find(".year-select").val(); var _month = this.opts.container.find(".month-select").val(); var _day = this.currentDate.getDate(); var cur_date = new Date(_year, _month, _day); this.setCurrentDate(cur_date); };
渲染日历框架，日历固定为42格，7列6行，星期从一到天
//渲染日历框架 DatePicker.prototype.renderCalendar = function() { var calendar_header = this.renderHeader(); var calendar_days = '<table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>'; var calendar_body = '<tbody>'; for (var i = 0; i < 6; i++) { calendar_body += '<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'; } calendar_body + '</tbody></table>'; this.opts.container.html(calendar_header + calendar_days + calendar_body); this.renderCalendarData(); };
渲染日历的头部，包括上月、下月按钮，年月的下拉框
//渲染日历头部 DatePicker.prototype.renderHeader = function() { var _year = this.today.getFullYear(); var _month = this.today.getMonth() + 1; var current_year = this.currentDate.getFullYear(); var current_month = this.currentDate.getMonth(); var monthArr = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"]; var min_year=(new Date(this.opts.min_date)).getFullYear();//最小年份 var start_year=current_year - this.opts.yearOffset>=min_year?current_year - this.opts.yearOffset:min_year;//下拉框起始年份 var yearSelect=""; //如果已经是最小日期，不显示上月按钮 if (current_year <= min_year && current_month <= 0) { yearSelect+='<select>'; }else{ yearSelect = '<span><</span> <select>'; } for (var i =start_year; i <= _year; i++) { if (i == current_year) { yearSelect += '<option value="' + i + '" selected>' + i + '</option>'; } else { yearSelect += '<option value="' + i + '">' + i + '</option>'; } } yearSelect += '</select>'; var monthSelect = '<select>'; for (var i = 0; i < 12; i++) { var state=""; if (current_year < _year) { if (i == current_month) { state="selected"; } }else if (current_year == _year) { if(i==current_month){ state="selected"; }else{ state="disabled"; } }else{ state="disabled"; } monthSelect += '<option value="' + i + '" '+state+'>' + monthArr[i] + '月</option>'; } if (current_year >= _year && current_month+1 >= _month) { monthSelect += '</select>'; }else{ monthSelect += '</select><span>></span>'; } return "<div>" + yearSelect + monthSelect + "</div>"; };