自定义的一个用于显示特定日期的日历控件
自己写的某项目里用到的一个例子，记录下来，以备参考
//控件封装代码
var tmpCalendar = {
config: {
value: null,
fullMonth: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
simpleMonth: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'],
fullWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thurday', 'Friday', 'Saturday', 'Sunday'],
simpleWeek: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.', 'Sun.'],
style: ''
+ '',
},
show: function (containner, dts, callback) {
if ($('#ue_calendar_style').length < 1) {
$(this.config.style).appendTo('head');
}
this.initDate(dts);
this.now = new Date();
this.dateList = dts;
this.value = this.dates[0] || new Date();
this.year = this.value.getFullYear();
this.month = this.value.getMonth() + 1;
this.date = this.value.getDate();
this.callback = callback;
if (!this.calendarDom) {
this.calendarDom = $(''
+ ''
+ ' '
+ ' ◂'
+ ' '
+ ' ▸'
+ ' '
+ ' '
+ ' SunMonTueWedThuFriSat'
+ ' '
+ ' '
+ ' '
+ '').appendTo(containner);
this.bindCalendarEvent();
}
this.setCalendarDate(this.value);
this.calendarDom.show();
},
initDate: function (arr) {
this.dates = [];
for (var i = 0; i < arr.length; i++) {
var dt = getDateFromStr(arr[i]);
dt && this.dates.push(dt);
}
},
isShow: function () {
return this.calendarDom && !this.calendarDom.is(":hidden");
},
hide: function () {
this.calendarDom.hide();
},
setCalendarDate: function (dt) {
$(".ue_calendar_week").show();
$(".ue_calendar_months").hide();
var y = dt.getFullYear(), m = dt.getMonth(),
maxDay = (m == 1 ? (((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) ? 29 : 28) : (m == 3 || m == 5 || m == 8 || m == 10) ? 30 : 31),
p = $('.ue_calendar_dates').html('').show();
var day = new Date(y, m, 1).getDay(), cnt = day + maxDay + 1;
for (var i = 1, j = 1; i < cnt; i++) {
if (i > day && j <= maxDay) {
var o = $('' + j + '').appendTo(p);
var d = this.dates.filter(function (x, i) {
return x.getFullYear() == y && x.getMonth() == m && x.getDate() == j;
});
if (d && d.length > 0) {
o.addClass('ue_calendar_selected').attr('timeStr', d[0].Format('yyyy-MM-dd HH:mm:ss'));
}
j++;
} else {
$('').appendTo(p);
}
}
$('.ue_calendar_select').html(this.config.fullMonth[m] + ',' + y);
this.type = 'd';
},
setCalendarMonth: function () {
$(".ue_calendar_week").hide();
$(".ue_calendar_dates").hide();
var d = $('.ue_calendar_months').html('').show();
for (var i = 0; i < 12; i++) {
var o = $('' + this.config.simpleMonth[i] + '').appendTo(d);
if (i == (this.month - 1)) {
o.addClass('ue_calendar_selected');
}
}
$(".ue_calendar_select").html(this.year);
this.type = 'm';
},
setCalendarYear: function (y) {
var d = $('.ue_calendar_months').html('');
for (var i = 0; i < 12; i++) {
var o = $('' + (y + i) + '').appendTo(d);
if ((y + i) == this.year) {
o.addClass('ue_calendar_selected')
}
}
$(".ue_calendar_select").html(y + ' - ' + (y + 11));
this.type = 'y';
},
bindCalendarEvent: function () {
var dt = this;
$('.ue_calendar_left').on('click', function (e) {
e.stopPropagation();
var type = dt.type;
if (type == 'd') {
var t = new Date(dt.year, dt.month - 2, 1, 0, 0, 0, 0);
dt.month = t.getMonth() + 1;
dt.year = t.getFullYear();
dt.date = 1;
dt.setCalendarDate(t);
}
if (type == 'm') {
dt.year -= 1
$(".ue_calendar_select").html(dt.year);
}
if (type == 'y') {
var years = $(".ue_calendar_select").html().split('-');
var year = parseInt(years[0], 10);
dt.setCalendarYear(year - 12);
}
});
$('.ue_calendar_right').on('click', function (e) {
e.stopPropagation();
var type = dt.type;
if (type == 'd') {
var t = new Date(dt.year, dt.month, 1, 0, 0, 0, 0);
dt.month = t.getMonth() + 1;
dt.year = t.getFullYear();
dt.date = 1;
dt.setCalendarDate(t);
}
if (type == 'm') {
dt.year += 1
$(".ue_calendar_select").html(dt.year);
}
if (type == 'y') {
var years = $(".ue_calendar_select").html().split('-');
var year = parseInt(years[0], 10);
dt.setCalendarYear(year + 12);
}
});
$('.ue_calendar_select').on('click', function (e) {
e.stopPropagation();
var type = dt.type;
if (type == 'd') {
dt.setCalendarMonth();
}
if (type == 'm') {
dt.setCalendarYear(dt.year - 6);
}
});
$(document).on('click', '.ue_calendar_canhover', function (e) {
e.stopPropagation();
if (dt.type == 'd') {
var v = $(this).attr('timeStr');
if (v) {
dt.callback(v);
dt.calendarDom.hide();
}
}
if (dt.type == 'm') {
var arr = dt.config.simpleMonth;
for (var i = 0; i < arr.length; i++) {
if (arr[i] == this.innerHTML && dt.year >= dt.now.getFullYear() && i >= dt.now.getMonth()) {
dt.month = i + 1;
var t = new Date(dt.year, i, dt.date, 0, 0, 0, 0);
dt.setCalendarDate(t);
}
}
}
if (dt.type == 'y') {
var year = parseInt(this.innerHTML, 10);
if (year >= dt.now.getFullYear()) {
dt.year = year;
dt.setCalendarMonth();
}
}
});
}
};
// 调用举例
function showCalendar() {
if (tmpCalendar .isShow()) {
tmpCalendar .hide();
} else {
tmpCalendar .show($('.ufa-calendar'), dateList, function (dt) {
$('#chkMsg').html('');
var t = getDateFromStr(dt);
webinar.xTime = t.Format('yyyy-MM-dd HH:mm:ss');
$('#webinarDate').html(t.Format('MM-dd-yyyy'));
$('#webinarTime').html(t.Format('hh:mm') + (t.getHours() > 11 ? 'pm' : 'am') + ' (MDT)');
});
}
}