建站
咨询
售后
建站咨询
' +
'
- ' +
'
接下来是单个日期选择的处理
定义构造函数和初始化
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 = '日一二三四五六';
var calendar_body = '';
for (var i = 0; i < 6; i++) {
calendar_body += '';
}
calendar_body + '';
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+='';
}else{
yearSelect = '< ';
}
for (var i =start_year; i <= _year; i++) {
if (i == current_year) {
yearSelect += '' + i + '';
} else {
yearSelect += '' + i + '';
}
}
yearSelect += '';
var monthSelect = '';
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 += '' + monthArr[i] + '月';
}
if (current_year >= _year && current_month+1 >= _month) {
monthSelect += '';
}else{
monthSelect += '>';
}
return "" + yearSelect + monthSelect + " //渲染日历数据
DatePicker.prototype.renderCalendarData = function() {
var self = this;
var _year = this.currentDate.getFullYear(); //当前年
var _month = this.currentDate.getMonth() + 1; //当前月
var _firstDay = new Date(_year, _month - 1, 1); //当前月第一天
var tds = this.opts.container.find(".calendar_body td");
var header = self.renderHeader();
this.opts.container.find(".calendar_header").html(header);
tds.each(function(index, item) {
var _thisDate = new Date(_year, _month - 1, index + 1 - _firstDay.getDay());
var _thisDay = _thisDate.getDate();
var _thisMonth = _thisDate.getMonth() + 1;
var _thisDateTime=_thisDate.getTime();
$(item).html(_thisDay).attr("date", _thisDay).removeClass("active").removeClass("disabled").removeClass("today");
//当前月并且当前选中日期高亮
if (_thisDay == self.tempActiveDate.getDate().getDate() && _thisMonth == _month) {
$(item).addClass("active");
}
//今天日期样式
if (_thisDay == self.todayDate) {
$(item).addClass("today");
}
//非当前月或者大于今天的日期禁用
if (_thisMonth !== _month || _thisDateTime>self.today.getTime()) {
$(item).addClass("disabled").removeClass('active today');
}
//如果选择的日期大于今天，则日期重置
if (_thisDateTime>self.today.getTime() && _thisDay == self.todayDate) {
$(item).addClass("active");
self.currentDate = _thisDate;
}
});
};
//设置当前日期
DatePicker.prototype.setCurrentDate = function(date) {
this.tempActiveDate.setDate(date);
this.currentDate = this.tempActiveDate.getDate();
this.renderCalendarData();
if(this.opts.updateCallback){
this.opts.updateCallback.call(null,this.currentDate);
}
};js完整代码
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);
};
//渲染日历框架
DatePicker.prototype.renderCalendar = function() {
var calendar_header = this.renderHeader();
var calendar_days = '日一二三四五六';
var calendar_body = '';
for (var i = 0; i < 6; i++) {
calendar_body += '';
}
calendar_body + '';
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+='';
}else{
yearSelect = '< ';
}
for (var i =start_year; i <= _year; i++) {
if (i == current_year) {
yearSelect += '' + i + '';
} else {
yearSelect += '' + i + '';
}
}
yearSelect += '';
var monthSelect = '';
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 += '' + monthArr[i] + '月';
}
if (current_year >= _year && current_month+1 >= _month) {
monthSelect += '';
}else{
monthSelect += '>';
}
return "" + yearSelect + monthSelect + " 