自己寫的某項目裏用到的一個例子，記錄下來，以備參考
//控件封裝代碼
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: ''
+ '<style id="ue_calendar_style">'
+ ' .ue_calendar_frame {border:1px solid #999;border-radius:3px;width:216px;height:auto;z-index:9999;overflow:hidden;font-size:12px;user-select:none;margin: 0;padding: 3px;background-color:#fff;display:none;font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;}'
+ ' .ue_calendar_over {border:none;width:210px; height:18px;overflow:hidden;text-align:center;position:relative;margin:5px 0;}'
+ ' .ue_calendar_over div {border:none;height:18px;line-height:18px;text-align:center;border-radius:2px;cursor:pointer;}'
+ ' .ue_calendar_left {float:left;width:20px;} .ue_calendar_left:hover{border:1px solid #69c;height:16px;line-height:16px;}'
+ ' .ue_calendar_select {display:inline-block;width:auto;} .ue_calendar_select:hover{border:1px solid #69c;height:16px;line-height:16px;}'
+ ' .ue_calendar_right {float:right;width:20px;}.ue_calendar_right:hover{border:1px solid #9cf;height:16px;line-height:16px;}'
+ ' .ue_calendar_week {border:none;width:210px; height:18px;overflow:hidden;}'
+ ' .ue_calendar_week div {border:none;height:18px;line-height:18px;width:30px;text-align:center;border-radius:2px;display:inline-block;}'
+ ' .ue_calendar_dates {border:none;width:210px; height:auto;overflow:hidden;}'
+ ' .ue_calendar_selected {background:#23a9e1;color:#fff;}'
+ ' .ue_calendar_dates div {border:none;height:18px;line-height:18px;width:30px;text-align:center;border-radius:2px;display:inline-block;}'
+ ' .ue_calendar_months{border:none;width:210px; height:auto;overflow:hidden;display:none;}'
+ ' .ue_calendar_months div {border:none;height:18px;line-height:18px;width:42px;margin:5px;text-align:center;border-radius:2px;display:inline-block;cursor:pointer;}'
+ ' .ue_calendar_months div:hover {border:1px solid #69c;height:16px;line-height:16px;}'
+ ' .ue_calendar_canhover{} .ue_calendar_canhover:hover {border:1px solid #69c;cursor:pointer;height:16px;line-height:16px;}'
+ '</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 = $(''
+ '<div class="ue_calendar_frame">'
+ ' <div class="ue_calendar_over">'
+ ' <div class="ue_calendar_left">◂</div>'
+ ' <div class="ue_calendar_select"></div>'
+ ' <div class="ue_calendar_right">▸</div>'
+ ' </div>'
+ ' <div class="ue_calendar_week">'
+ ' <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>'
+ ' </div>'
+ ' <div class="ue_calendar_dates"></div>'
+ ' <div class="ue_calendar_months"></div>'
+ '</div>').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 = $('<div class="ue_calendar_canhover">' + j + '</div>').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 {
$('<div></div>').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 = $('<div class="ue_calendar_canhover">' + this.config.simpleMonth[i] + '</div>').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 = $('<div class="ue_calendar_canhover">' + (y + i) + '</div>').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();
}
}
});
}
};
// 調用舉例
<div class="ufa-calendar"></div>
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)');
});
}
}