calendarpopup.js
来自「一个很好的开源项目管理系统源代码」· JavaScript 代码 · 共 1,507 行 · 第 1/4 页
JS
1,507 行
function CP_showCalendar(anchorname) {
if (arguments.length>1) {
if (arguments[1]==null||arguments[1]=="") {
this.currentDate=new Date();
}
else {
this.currentDate=new Date(parseDate(arguments[1]));
}
}
this.populate(this.getCalendar());
this.showPopup(anchorname);
}
// Simple method to interface popup calendar with a text-entry box
function CP_select(inputobj, linkname, format) {
var selectedDate=(arguments.length>3)?arguments[3]:null;
if (!window.getDateFromFormat) {
alert("calendar.select: To use this method you must also include 'date.js' for date formatting");
return;
}
if (this.displayType!="date"&&this.displayType!="week-end") {
alert("calendar.select: This function can only be used with displayType 'date' or 'week-end'");
return;
}
if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") {
alert("calendar.select: Input object passed is not a valid form input object");
window.CP_targetInput=null;
return;
}
window.CP_targetInput = inputobj;
this.currentDate=null;
var time=0;
if (selectedDate!=null) {
time = getDateFromFormat(selectedDate,format)
}
else if (inputobj.value!="") {
time = getDateFromFormat(inputobj.value,format);
}
if (selectedDate!=null || inputobj.value!="") {
if (time==0) { this.currentDate=null; }
else { this.currentDate=new Date(time); }
}
window.CP_dateFormat = format;
this.showCalendar(linkname);
}
// Get style block needed to display the calendar correctly
function getCalendarStyles() {
var result = "";
var p = "";
if (this!=null && typeof(this.cssPrefix)!="undefined" && this.cssPrefix!=null && this.cssPrefix!="") { p=this.cssPrefix; }
result += "<style>\n";
result += "."+p+"cpYearNavigation,."+p+"cpMonthNavigation { background-color:#C0C0C0; text-align:center; vertical-align:center; text-decoration:none; color:#000000; font-weight:bold; }\n";
result += "."+p+"cpDayColumnHeader, ."+p+"cpYearNavigation,."+p+"cpMonthNavigation,."+p+"cpCurrentMonthDate,."+p+"cpCurrentMonthDateDisabled,."+p+"cpOtherMonthDate,."+p+"cpOtherMonthDateDisabled,."+p+"cpCurrentDate,."+p+"cpCurrentDateDisabled,."+p+"cpTodayText,."+p+"cpTodayTextDisabled,."+p+"cpText { font-family:arial; font-size:8pt; }\n";
result += "td."+p+"cpDayColumnHeader { text-align:right; border:solid thin #C0C0C0;border-width:0 0 1 0; }\n";
result += "."+p+"cpCurrentMonthDate, ."+p+"cpOtherMonthDate, ."+p+"cpCurrentDate { text-align:right; text-decoration:none; }\n";
result += "."+p+"cpCurrentMonthDateDisabled, ."+p+"cpOtherMonthDateDisabled, ."+p+"cpCurrentDateDisabled { color:#D0D0D0; text-align:right; text-decoration:line-through; }\n";
result += "."+p+"cpCurrentMonthDate, .cpCurrentDate { color:#000000; }\n";
result += "."+p+"cpOtherMonthDate { color:#808080; }\n";
result += "td."+p+"cpCurrentDate { color:white; background-color: #C0C0C0; border-width:1; border:solid thin #800000; }\n";
result += "td."+p+"cpCurrentDateDisabled { border-width:1; border:solid thin #FFAAAA; }\n";
result += "td."+p+"cpTodayText, td."+p+"cpTodayTextDisabled { border:solid thin #C0C0C0; border-width:1 0 0 0;}\n";
result += "a."+p+"cpTodayText, span."+p+"cpTodayTextDisabled { height:20px; }\n";
result += "a."+p+"cpTodayText { color:black; }\n";
result += "."+p+"cpTodayTextDisabled { color:#D0D0D0; }\n";
result += "."+p+"cpTable { border:solid thin #808080; width:144; border:1; border-width:1; padding:1;}\n";
result += "."+p+"cpNavigationTable { color:red; width:144; border:0; border-width:0; padding:0;}\n";
result += "."+p+"cpDisplayTable { color:red; width:120; border:0; padding:1;}\n";
result += "</style>\n";
return result;
}
// Return a string containing all the calendar code to be displayed
function CP_getCalendar() {
var now = new Date();
// Reference to window
if (this.type == "WINDOW") { var windowref = "window.opener."; }
else { var windowref = ""; }
var result = "";
// If POPUP, write entire HTML document
if (this.type == "WINDOW") {
result += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n\n';
//Tony
//result += "<html><head><title>Calendar</title>"+this.getStyles()+'</head><body marginwidth="0" marginheight="0" topmargin="0" rightmargin="0" Leftmargin="0">\n';
result += "<html><head><title>Calendar</title>"+'</head><body marginwidth="0" marginheight="0" topmargin="0" rightmargin="0" Leftmargin="0">\n';
result += '<center><table width="100%" border="0" borderwidth="0" cellspacing="0" cellpadding="0">\n';
}
else {
//Tony:
//result += '<table class="'+this.cssPrefix+'cpBorder" width="144" border="1" borderwidth="1" cellspacing="0" cellpadding="1">\n';
//XXX
result += '<table class="'+this.cssPrefix+'cpTable" width="120" border="1" borderwidth="1" cellspacing="0" cellpadding="1">\n';
//result += '<table width="120" border="5" cellspacing="0" cellpadding="0">\n';
result += '<tr><td align="center">\n';
result += '<center>\n';
}
// Code for DATE display (default)
// -------------------------------
if (this.displayType=="date" || this.displayType=="week-end") {
if (this.currentDate==null) { this.currentDate = now; }
if (arguments.length > 0) { var month = arguments[0]; }
else { var month = this.currentDate.getMonth()+1; }
if (arguments.length > 1 && arguments[1]>0 && arguments[1]-0==arguments[1]) { var year = arguments[1]; }
else { var year = this.currentDate.getFullYear(); }
var daysinmonth= new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);
if ( ( (year%4 == 0)&&(year%100 != 0) ) || (year%400 == 0) ) {
daysinmonth[2] = 29;
}
var current_month = new Date(year,month-1,1);
var display_year = year;
var display_month = month;
var display_date = 1;
var weekday= current_month.getDay();
var offset = 0;
offset = (weekday >= this.weekStartDay) ? weekday-this.weekStartDay : 7-this.weekStartDay+weekday ;
if (offset > 0) {
display_month--;
if (display_month < 1) { display_month = 12; display_year--; }
display_date = daysinmonth[display_month]-offset+1;
}
var next_month = month+1;
var next_month_year = year;
if (next_month > 12) { next_month=1; next_month_year++; }
var last_month = month-1;
var last_month_year = year;
if (last_month < 1) { last_month=12; last_month_year--; }
var date_class;
if (this.type!="WINDOW") {
//Tony
//result += '<table width="144" border="0" borderwidth="0" cellspacing="0" cellpadding="0">';
//XXX
result += '<table width="120" border="0" cellspacing="0" cellpadding="0">';
}
result += '<tr>\n';
var refresh = 'javascript:'+windowref+'CP_refreshCalendar';
if (this.isShowYearNavigation) {
result += '<td class="'+this.cssPrefix+'cpMonthNavigation" width="10"><a class="'+this.cssPrefix+'cpMonthNavigation" href="'+refresh+'('+this.index+','+last_month+','+last_month_year+');"><</a></td>';
result += '<td class="'+this.cssPrefix+'cpMonthNavigation" width="58"><span class="'+this.cssPrefix+'cpMonthNavigation">'+this.monthNames[month-1]+'</span></td>';
result += '<td class="'+this.cssPrefix+'cpMonthNavigation" width="10"><a class="'+this.cssPrefix+'cpMonthNavigation" href="'+refresh+'('+this.index+','+next_month+','+next_month_year+');">></a></td>';
result += '<td class="'+this.cssPrefix+'cpMonthNavigation" width="10"> </td>';
result += '<td class="'+this.cssPrefix+'cpYearNavigation" width="10"><a class="'+this.cssPrefix+'cpYearNavigation" href="'+refresh+'('+this.index+','+month+','+(year-1)+');"><</a></td>';
if (this.isShowYearNavigationInput) {
result += '<td class="'+this.cssPrefix+'cpYearNavigation" width="36"><input name="cpYear" class="'+this.cssPrefix+'cpYearNavigation" size="4" maxlength="4" value="'+year+'" onBlur="'+refresh+'('+this.index+','+month+',this.value-0);"></td>';
}
else {
result += '<td class="'+this.cssPrefix+'cpYearNavigation" width="36"><span class="'+this.cssPrefix+'cpYearNavigation">'+year+'</span></td>';
}
result += '<td class="'+this.cssPrefix+'cpYearNavigation" width="10"><a class="'+this.cssPrefix+'cpYearNavigation" href="'+refresh+'('+this.index+','+month+','+(year+1)+');">></a></td>';
}
else {
result += '<td class="cpMonthNavigation" width="22"><a href="'+refresh+'('+this.index+','+last_month+','+last_month_year+');"><<</a></td>\n';
result += '<td class="cpMonthNavigation" width="60">' + this.monthNames[month-1]+' '+year+'</span></td>\n';
result += '<td class="cpMonthNavigation" width="22"><a href="'+refresh+'('+this.index+','+next_month+','+next_month_year+');">>></a></td>\n';
}
result += '</tr></table>\n';
//alert(result);
// Tony:
//result += '<table width="120" border="0" cellspacing="0" cellpadding="1" align="center">\n';
result += '<table border="0" cellspacing="0" cellpadding="0" >\n';
result += '<tr>\n';
for (var j=0; j<7; j++) {
result += '<td class="'+this.cssPrefix+'cpDayColumnHeader">'+this.dayHeaders[(this.weekStartDay+j)%7]+'</td>\n';
}
result += '</tr>\n';
for (var row=1; row<=6; row++) {
result += '<tr>\n';
for (var col=1; col<=7; col++) {
var disabled=false;
if (this.disabledDatesExpression!="") {
var ds=""+display_year+LZ(display_month)+LZ(display_date);
eval("disabled=("+this.disabledDatesExpression+")");
}
var dateClass = "";
if ((display_month == this.currentDate.getMonth()+1) && (display_date==this.currentDate.getDate()) && (display_year==this.currentDate.getFullYear())) {
dateClass = "cpCurrentDate";
}
else if (display_month == month) {
dateClass = "cpCurrentMonthDate";
}
else {
dateClass = "cpOtherMonthDate";
}
if (disabled || this.disabledWeekDays[col-1]) {
result += ' <td class="'+this.cssPrefix+dateClass+'"><span class="'+this.cssPrefix+dateClass+'Disabled">'+display_date+'</span></td>\n';
}
else {
var selected_date = display_date;
var selected_month = display_month;
var selected_year = display_year;
if (this.displayType=="week-end") {
var d = new Date(selected_year,selected_month-1,selected_date,0,0,0,0);
d.setDate(d.getDate() + (7-col));
selected_year = d.getYear();
if (selected_year < 1000) { selected_year += 1900; }
selected_month = d.getMonth()+1;
selected_date = d.getDate();
}
//XXX
//result += '<td> </td>';
result += '<td class="'+this.cssPrefix+dateClass+'"><a href="javascript:'+windowref+this.returnFunction+'('+selected_year+','+selected_month+','+selected_date+');'+windowref+'CP_hideCalendar(\''+this.index+'\');">'+display_date+'</a></td>\n';
//result += ' <td class="'+this.cssPrefix+dateClass+'"><a href="javascript:'+windowref+this.returnFunction+'('+selected_year+','+selected_month+','+selected_date+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" class="'+this.cssPrefix+dateClass+'">'+display_date+'</a></td>\n';
}
display_date++;
if (display_date > daysinmonth[display_month]) {
display_date=1;
display_month++;
}
if (display_month > 12) {
display_month=1;
display_year++;
}
}
result += '</tr>';
}
var current_weekday = now.getDay() - this.weekStartDay;
if (current_weekday < 0) {
current_weekday += 7;
}
result += '<tr>\n';
/* Tony modified got rid of align="center" */
result += ' <td colspan="7" class="'+this.cssPrefix+'cpTodayText">\n';
if (this.disabledDatesExpression!="") {
var ds=""+now.getFullYear()+LZ(now.getMonth()+1)+LZ(now.getDate());
eval("disabled=("+this.disabledDatesExpression+")");
}
if (disabled || this.disabledWeekDays[current_weekday+1]) {
result += ' <span class="'+this.cssPrefix+'cpTodayTextDisabled">'+this.todayText+'</span>\n';
}
else {
result += ' <a class="'+this.cssPrefix+'cpTodayText" href="javascript:'+windowref+this.returnFunction+'(\''+now.getFullYear()+'\',\''+(now.getMonth()+1)+'\',\''+now.getDate()+'\');'+windowref+'CP_hideCalendar(\''+this.index+'\');">'+this.todayText+'</a>\n';
}
result += ' <br />\n';
result += ' </td></tr></table></center></td></tr></table>\n';
//alert(result.substr(0, 1000));
}
// Code common for MONTH, QUARTER, YEAR
// ------------------------------------
if (this.displayType=="month" || this.displayType=="quarter" || this.displayType=="year") {
if (arguments.length > 0) { var year = arguments[0]; }
else {
if (this.displayType=="year") { var year = now.getFullYear()-this.yearSelectStartOffset; }
else { var year = now.getFullYear(); }
}
if (this.displayType!="year" && this.isShowYearNavigation) {
result += '<table width="100" border="1" borderwidth="0" cellspacing="0" cellpadding="0">';
result += '<tr>\n';
result += ' <td class="'+this.cssPrefix+'cpYearNavigation" ><a class="'+this.cssPrefix+'cpYearNavigation" href="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-1)+');"><<</a></td>\n';
result += ' <td class="'+this.cssPrefix+'cpYearNavigation" >'+year+'</td>\n';
result += ' <td class="'+this.cssPrefix+'cpYearNavigation" ><a class="'+this.cssPrefix+'cpYearNavigation" href="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+1)+');">>></a></td>\n';
result += '</tr></table>\n';
}
}
// Code for MONTH display
// ----------------------
if (this.displayType=="month") {
// If POPUP, write entire HTML document
//result += '<table width="120" border="0" cellspacing="1" cellpadding="0" align="center">\n';
result += '<table class="'+this.cssPrefix+'cpDisplayTable"\n';
for (var i=0; i<4; i++) {
result += '<tr>';
for (var j=0; j<3; j++) {
var monthindex = ((i*3)+j);
result += '<td width=33% align="center"><a class="'+this.cssPrefix+'cpText" href="javascript:'+windowref+this.returnMonthFunction+'('+year+','+(monthindex+1)+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" class="'+date_class+'">'+this.monthAbbreviations[monthindex]+'</a></td>';
}
result += '</tr>';
}
result += '</table></center></td></tr></table>\n';
}
// Code for QUARTER display
// ------------------------
if (this.displayType=="quarter") {
//result += '<br /><table width="120" border="1" cellspacing="0" cellpadding="0" align="center">\n';
result += '<table class="'+this.cssPrefix+'cpDisplayTable"\n';
for (var i=0; i<2; i++) {
result += '<tr>';
for (var j=0; j<2; j++) {
var quarter = ((i*2)+j+1);
result += '<td width=50% align="center"><br /><a class="'+this.cssPrefix+'cpText" href="javascript:'+windowref+this.returnQuarterFunction+'('+year+','+quarter+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" class="'+date_class+'">Q'+quarter+'</a><br /><br /></td>';
}
result += '</tr>';
}
result += '</table></center></td></tr></table>\n';
}
// Code for YEAR display
// ---------------------
if (this.displayType=="year") {
var yearColumnSize = 4;
result += '<table width="120" border="0" borderwidth="0" cellspacing="0" cellpadding="0">';
result += '<tr>\n';
result += ' <td class="'+this.cssPrefix+'cpYearNavigation" width="50%"><a class="cpYearNavigation" href="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year-(yearColumnSize*2))+');"><<</a></td>\n';
result += ' <td class="'+this.cssPrefix+'cpYearNavigation" width="50%"><a class="cpYearNavigation" href="javascript:'+windowref+'CP_refreshCalendar('+this.index+','+(year+(yearColumnSize*2))+');">>></a></td>\n';
result += '</tr></table>\n';
//result += '<table width="120" border="0" cellspacing="1" cellpadding="0" align="center">\n';
result += '<table class="'+this.cssPrefix+'cpDisplayTable"\n';
for (var i=0; i<yearColumnSize; i++) {
for (var j=0; j<2; j++) {
var currentyear = year+(j*yearColumnSize)+i;
result += '<td width="50%" align="center"><a class="'+this.cssPrefix+'cpText" href="javascript:'+windowref+this.returnYearFunction+'('+currentyear+');'+windowref+'CP_hideCalendar(\''+this.index+'\');" class="'+date_class+'">'+currentyear+'</a></td>';
}
result += '</tr>';
}
result += '</table></center></td></tr></table>\n';
}
// Common
if (this.type == "WINDOW") {
result += "</body></html>\n";
}
return result;
}
/******************************************
Tony added:
This is based on the cool menu addin (refer: cm_addins.js.)
IE5+ and NS6+ only - ignores the other browsers
Because of the selectbox bug in the browsers that makes
selectboxes have the highest z-index whatever you do.
this script will check for selectboxes that interfere with
your the date picker and hide them.
*****************************************/
function processSelectBoxes(processType, x,y,w,h){
// x:topleft x-axis, y:topleft y-axis, w:width of calendar, h:hieght of calendar
domBrowser=document.getElementById?1:0
operaBrowser=window.opera
if(domBrowser && !operaBrowser){
var selx,sely,selw,selh,i
sel=this.document.getElementsByTagName("SELECT")
for(i=0;i<sel.length;i++){
selx=0;
sely=0;
var selp;
if(sel[i].offsetParent){
selp=sel[i];
while(selp.offsetParent){
selp=selp.offsetParent;
selx+=selp.offsetLeft;
sely+=selp.offsetTop;
}
}
selx+=sel[i].offsetLeft;
sely+=sel[i].offsetTop
selw=sel[i].offsetWidth;
selh=sel[i].offsetHeight
if(selx+selw>x && selx<x+w && sely+selh>y && sely<y+h){
if (processType == "hide") {
if(sel[i].style.visibility!="hidden"){
sel[i].style.visibility="hidden";
}
}
else {
if(sel[i].style.visibility!="visible")
sel[i].style.visibility="visible"
}
}
}
}
}
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?