请教 js日历控件使用的方法

Question

下面是日历控件的js代码，不懂js，请大家教我使用；
很急，给的人没教怎么用// By lenhatanh | nhatanh.voxfamilyvn.com | a plugin of mootools
// docs http://nhatanh.voxfamilyvn.com/moo/calendar.html
// modified by jd
// to do: hide on click; var DateTime = new Class({ DayofMonth: function(m,y) {
var _ = [,31,,31,30,31,30,31,31,30,31,30,31];
if(m==2) return (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) ? 29 : 28;
else return _[m];
}, DatetoWeekday: function(d,m,y) {
var d = new Date(y,m-1,d);
_1 = d.getDay();
_2 = d.getMonth();
if(_2 == m-1) return _1!=0 ? _1 : 7 //Sunday is 7
else return false;
}});var Calendar = DateTime.extend({
   
info: function(opt) {
// today = new Date();
this.opt = {
min_month: 1,
min_year: 1,
max_month: 12,
max_year: 9999,
p_name: document.body,
position: 'inside',
onSelect: Class.empty,
link_next: '>>',
link_prev: '<<',
weekday_text: 'Mon|Tue|Wed|Thu|Fri|Sat|Sun',
month_text: 'January|February|March|April|May|June|July|August|September|October|November|December',
/* today_year: Number(today.getYear()),
today_month: Number(today.getMonth()),
today_day: Number(today.getDate()),
min_year: Number(today.getYear()),
min_month: Number(today.getMonth()),
min_day: Number(today.getDate()), */
auto_show: false,
offsetX: 5,
offsetY: 5
};
Object.extend(this.opt, opt || {});
this.year = this.opt.year ? this.opt.year : this.opt.c_year;
this.month = this.opt.month ? this.opt.month : this.opt.c_month;
}, initialize: function(opt) {
this.info(opt);
if(!this.opt.c_day || !this.opt.c_year || !this.opt.c_month) return;
if(this.opt.auto_show) this.Create();
else this.ready_show = false;
},// new function for external access 
setMinDate: function(dd,mm,yyyy,add){
var tempDate = new Date();
tempDate.setDate((add == 1 && dd == this.DayofMonth(mm, yyyy)) ? 1 : dd+add);
var addMonth = (add == 1 && dd == this.DayofMonth(mm, yyyy)) ? 1 : 0;
// NOTE: months in javascript's Date class run from 0 through 11!
tempDate.setMonth((mm+addMonth-1) % 12);
var addYear = (addMonth == 1 && mm == 12) ? 1 : 0;
tempDate.setFullYear(yyyy + addYear);
this.opt.c_year = tempDate.getFullYear();
this.opt.c_month = tempDate.getMonth()+1;
this.opt.c_day = tempDate.getDate();
this.year = yyyy;
this.month = mm;
this.fixCal();
}, preCreate1: function() { //Header of calendar's html
/**/ this.html1 = '<h2>'+ this.opt.title +'</h2>';
this.html1 += '<div class="'+ this.opt.css_title +'">'; mon = this.opt.month_text.split('|');
this.html1 += '<span id="' + this.opt.e_name + '_prev">' + this.opt.link_prev + '</span> '
+ '<span id="' + this.opt.e_name + '_moye">' + mon[this.month-1] + '&nbsp;' + this.year + '</span>'
+ ' <span id="' + this.opt.e_name + '_next">' + this.opt.link_next + '</span></div>'; day = this.opt.weekday_text.split('|');
for(i=0;i<=6;i++) {
this.html1 += '<div class="' + this.opt.css_day + '">' + day[i] + '</div>';
}
},
   
preCreate2: function() { //Footer of calendar's html
if(this.year == this.opt.c_year) {
if(this.month == this.opt.c_month) _3 = this.opt.c_day;
else if(this.month > this.opt.c_month) _3 = 0;
else _3 = 32
} else if(this.year < this.opt.c_year) _3 = 32;
else _3 = 0; _7 = this.DatetoWeekday(1,this.month,this.year);       
_4 = this.DayofMonth(this.month,this.year);
_5 = _4 + _7 - 1;
_6 = Math.ceil(_5 / 7) * 7; _8 = 1;
var el = new Array()
var el_v = new Array();
this.html = '<div id="' + this.opt.e_name + '_allday">';
for(i=1;i<=_6;i++) {
if(i>=_7 && i<=_5) { id = this.opt.e_name + '_element_' + _8;
el.push(id);
el_v.push(_8);
/**/ this.html += '<a id="' + id + '" class="';
if(_8<_3)  this.html += this.opt.css_pastday;
else if(_8==_3)  this.html += this.opt.css_currentday;
else  this.html += this.opt.css_futureday;
/**/ this.html += '">' + _8 + '</a>';
_8++;/**/ } else this.html += '<div class="' + this.opt.css_emptyday + '">&nbsp;</div>';
}
this.html += '</div>';
this.el = el;
this.el_v = el_v;
}, dayEve: function() { // Set event when you click any date
this.el.each(function(e, i){
$(e).addEvent('click', function(){
if(!this.opt.auto_show) this.hide();
this.opt.onSelect([this.month,this.el_v[i],this.year], this);
}.bind(this));
}, this);
}, Create: function() {
if(!$(this.opt.e_name)) {
/**/ var _1 = new Element('div');
_1.id = this.opt.e_name;
}
else _1 = $(this.opt.e_name); this.preCreate1();
this.preCreate2();
_1.addClass(this.opt.css_calendar);
_1.setStyles({display: 'block', opacity: 0});
_1.setHTML(this.html1+this.html);
if(!this.opt.auto_show) {
/**/ y = $(this.opt.p_name).getTop() + this.opt.offsetY;
/**/ x = $(this.opt.p_name).getLeft() + this.opt.offsetX;
_1.setStyles({position: 'absolute', top: y + 'px', left: x + 'px'});
_1.setStyle('z-index', '1000');
_1.injectInside(document.body).effect('opacity').custom(0,1);
} else {
_1.inject(this.opt.p_name, this.opt.position).effect('opacity').custom(0,1);
} this.dayEve();
$(this.opt.e_name + '_prev').addEvent('click', function(){this.preMon()}.bind(this));
$(this.opt.e_name + '_next').addEvent('click', function(){this.nexMon()}.bind(this)); // this checks for IE 5 and 6, then adds an iframe to the document to act as a shim
if (/MSIE (5.5|6.)/.test(navigator.userAgent)) {
this.divShim = new IframeShim({
element: $(this.opt.e_name),
name: 'myShim'
});
this.divShim.show();
} // end hack this.ready_show = true;
}, fixPos: function() {
/**/ y = $(this.opt.p_name).getTop() + this.opt.offsetY;
/**/ x = $(this.opt.p_name).getLeft() + this.opt.offsetX;
$(this.opt.e_name).setStyles({top: y + 'px', left: x + 'px'});
}, fixCal: function() {
$(this.opt.e_name + '_moye').setHTML(mon[this.month-1] + '&nbsp;' + this.year);
this.preCreate2();
$(this.opt.e_name + '_allday').setHTML(this.html);
this.dayEve();
}, hide: function() {
if(!this.ready_show) return;
else {
$(this.opt.e_name).effect('opacity').custom(1,0);
// hide shim
if (/MSIE (5.5|6.)/.test(navigator.userAgent)) {
this.divShim.hide();
} // end hack
this.ready_show = false;
}
}, show: function() {
if(!$(this.opt.e_name)) {
this.Create();
this._1stclick = 1;
/* this need to be rewritten: hide datepickers if click is outside _all_ pickers */
/*
document.addEvent('click', function(e) {
this.fixPos();
if(this._1stclick) {
this._1stclick = 0;
} else {
var p = $(this.opt.e_name).getCoordinates();
var e = new Event(e);
if(p.left > e.page.x || p.right < e.page.x || p.top > e.page.y || p.bottom < e.page.y) {
this.hide();
this._1stclick = 1;
}
}
}.bind(this));
*/
} else {
if(this.ready_show) return;
else {
$(this.opt.e_name).effect('opacity').custom(0,1);
// show shim
if (/MSIE (5.5|6.)/.test(navigator.userAgent)) {
this.divShim.show();
} // end hack
this.ready_show = true;
this._1stclick = 1;
}
}
}, preMon: function () {
if(this.year==this.opt.min_year) {
if(this.month ==this.opt.min_month) return;
else this.month--;
} else {
if(this.month==1) {
this.month=12;
this.year--;
} else this.month--;
}
this.fixCal();
},

Answer 1

nexMon: function () {
if(this.year==this.opt.max_year) {
if(this.month ==this.opt.max_month) return;
else this.month++;
} else {
if(this.month==12) {
this.month=1;
this.year++;
} else this.month++;
}
this.fixCal();
}
});
/* by jd */var TwinCalendar = new Class({
setOptions: function(opt) {
this.opt = {
baseOffsetX: 0,
baseOffsetY: 0,
IEHack: false,
triggerURL: '../shared/nps/icon-calendar.gif',
triggerAlt: translations.calOpenText
};
Object.extend(this.opt, opt || {});
},

initialize: function(element,options) {
this.setOptions(options);
this.cTrigger = new Element('img').addClass('cTrigger').injectBefore(this.opt.inDDsel);
this.cTrigger.src = this.opt.triggerURL;
this.cTrigger.alt = this.opt.triggerAlt;
this.cTrigger.title = this.opt.triggerAlt;
this.cTrigger.id = 'cTrigger';
var today = new Date();
var calendarIn = new Calendar({
IEHack: this.opt.IEHack,
title: translations.calCheckinText,
offsetX: this.opt.baseOffsetX,
offsetY: this.opt.baseOffsetY,
min_month: today.getMonth()+1,
min_year: today.getFullYear(),
max_month: 12,
max_year: today.getFullYear()+3,
month: Number(this.opt.inMMsel.value),
year: Number(this.opt.inYYYYsel.value),
c_year: Number(this.opt.inYYYYsel.value),
c_month: Number(this.opt.inMMsel.value),
c_day: Number(this.opt.inDDsel.value),
css_calendar: 'c_all',
css_title: 'c_title',
css_day: 'c_cday',
css_emptyday: 'e_day',
css_pastday: 'p_day',
css_currentday: 'c_day',
css_futureday: 'f_day',
auto_show: false,
e_name: 'calendarIn',
p_name: 'cTrigger', 
// position: 'after',
link_next: '>>',
link_prev: '<<',
weekday_text: translations.calWeekdays,
month_text: translations.calMonths,
onSelect: function(value) {
$('checkInDay').value = value[1];
$('checkInMonth').value = value[0];
$('checkInYear').value = value[2];
calendarOut.setMinDate(value[1],value[0],value[2],1);
/* this.opt.inDDsel.value = value[1];
this.opt.inMMsel.value = value[0];
this.opt.inYYYYsel.value = value[2]; */
}
});
var calendarOut = new Calendar({
IEHack: this.opt.IEHack,
title: translations.calCheckoutText,
offsetX: this.opt.baseOffsetX,
offsetY: this.opt.baseOffsetY+178,
min_month: today.getMonth()+1,
min_year: today.getFullYear(),
max_month: 12,
max_year: today.getFullYear()+3,
month: Number(this.opt.outMMsel.value),
year: Number(this.opt.outYYYYsel.value),
c_year: Number(this.opt.outYYYYsel.value),
c_month: Number(this.opt.outMMsel.value),
c_day: Number(this.opt.outDDsel.value),
css_calendar: 'c_all',
css_title: 'c_title',
css_day: 'c_cday',
css_emptyday: 'e_day',
css_pastday: 'p_day',
css_currentday: 'c_day',
css_futureday: 'f_day',
auto_show: false,
e_name: 'calendarOut',
p_name: 'cTrigger', 
// position: 'after',
link_next: '>>',
link_prev: '<<',
weekday_text: translations.calWeekdays,
month_text: translations.calMonths,
onSelect: function(value) {
$('checkOutDay').value = value[1];
$('checkOutMonth').value = value[0];
$('checkOutYear').value = value[2];
$('checkOutYear').focus();
/* this.opt.inDDsel.value = value[1];
this.opt.inMMsel.value = value[0];
this.opt.inYYYYsel.value = value[2]; */
}
});
this.cTrigger.addEvent('click', function(){
calendarIn.show();
calendarOut.show();
});
}
});

Answer 2

http://www.google.cn/search?hl=zh-CN&q=%E5%9F%BA%E4%BA%8EMootools%E7%9A%84%E6%97%A5%E5%8E%86%E7%BB%84%E4%BB%B6&btnG=Google+%E6%90%9C%E7%B4%A2&meta=lr%3Dlang_zh-CN&aq=f&oq=

Answer 3

 去下一个my97datetimepicker 名字好象是这么写，很方便