datechooser.js

javascript 很酷的类库

                        this.getCellHTML(displayDate.getShortFullName(), 
                                         baseHeaderStyle + "Disabled"));			
			}
			if (this.showMonthButtons) {
                var disableNextMonth =
                    (displayDate.getFullYear() == 9999 && displayDate.getMonth() == 11);
				output.append(
                        this.getCellButtonHTML(disableNextMonth ? " " :
                                                this.imgHTML(this.nextMonthIcon,
                                                             this.nextMonthIconWidth,
                                                             this.nextMonthIconHeight), 
                                               disableNextMonth ? "" :
                                                this.getID()+".showNextMonth()", 
                                               baseHeaderStyle, null,
                                               disableNextMonth ? true : null,
                                               isc.Canvas.CENTER, 
                                               " WIDTH=15"));
			}
			if (this.showYearButtons) {
                var disableNextYear = displayDate.getFullYear() == 9999;
                var nextYearIconHTML;
                if (this.showDoubleYearIcon) {
                    var monthIconHTML = this.imgHTML(this.nextMonthIcon, this.nextMonthIconWidth,
                                                             this.nextMonthIconHeight);
                    nextYearIconHTML = disableNextYear ? " " :
                                       "<NOBR>"+ monthIconHTML + monthIconHTML + "<\/NOBR>";
                } else {
                    nextYearIconHTML = disableNextYear ? "&nbsp;" :
                                            this.imgHTML(this.nextYearIcon,
                                                         this.nextYearIconWidth,
                                                         this.nextYearIconHeight);
                }
				output.append(
                        this.getCellButtonHTML(nextYearIconHTML,
                                               disableNextYear ? "" :
                                                this.getID()+".showNextYear()",
                                               baseHeaderStyle,
                                               null, 
                                               disableNextYear ? true : null,
                                               isc.Canvas.CENTER, " WIDTH=15"));
			}
			output.append("<\/TR><\/TABLE>");
		}

		output.append("<TABLE WIDTH=" , this.width, 
                      " HEIGHT=" , (this.getHeight()-this.headerHeight) , 
                      " CELLSPACING=0 CELLPADDING=2 BORDER=", this.cellBorder,">");

		// write the day-of-week headers (starting with firstDayOfWeek)
		output.append("<TR><TR HEIGHT=15>");
        var dayNames = this.getDayNames();
        for (var i = 0; i < dayNames.length; i++) {
            output.append(
                this.getCellHTML("<B>"+dayNames[(i + this.firstDayOfWeek) %7]+"</B>", 
                                 this.headerStyle)
            );
        }
        output.append("<\/TR>");
            
		// go back to the first day of the week for the start date
        displayDate.setDate(displayDate.getDate()
            - displayDate.getDay()
            + this.firstDayOfWeek
            // start date may have a lower "day number" (sun=0 thru sat=6) than firstDayOfWeek,
            // in which case we need to adjust back by a week
            - ((displayDate.getDay() < this.firstDayOfWeek) ? 7 : 0)
        );
        
        var earlyFinish;
        var isAlternateRow = false;
		while (true) {        
            if (this.alternateWeekStyles) isAlternateRow = !isAlternateRow;

			output.append("<TR>");
			for (var i = 0; i < 7; i++) {
                var baseStyle = (i > 0 && i < 6) ? this.baseWeekdayStyle :
                                                   this.baseWeekendStyle;
                if (isAlternateRow) baseStyle += this.alternateStyleSuffix;
				output.append(this.getDayCellButtonHTML((earlyFinish?null:displayDate), 
                                                        baseStyle));
                // In IE6 (resolved in IE7) you can crash the browser by attempting to
                // set a date to a value higher than Dec 31 9999
                // Just disallow this in all browsers
                if (this.year == 9999 && this.month == 11 && displayDate.getDate() == 31) {
                    earlyFinish = true;
                } else {
                    displayDate.setDate(displayDate.getDate()+1);
                }
			}
			output.append("<\/TR>");
                        
			if (displayDate.getMonth() != this.month || earlyFinish) break;
		}
		output.append("<TR>");
		// if we're supposed to show today or cancel buttons, do so
		if (this.showTodayButton) {
			output.append(this.getCellButtonHTML(
                                this.todayButtonTitle,
								this.getID()+".dateClick(" + new Date().getFullYear() + "," + 
                                                             new Date().getMonth() + "," + 
                                                             new Date().getDate() + ")",
								this.baseButtonStyle,null, null,
								isc.Canvas.CENTER,
								" COLSPAN=4"
							)
						);
		}

		// if we're supposed to show today or cancel buttons, do so
		if (this.showCancelButton) {
			output.append(this.getCellButtonHTML(
                                this.cancelButtonTitle,
								this.getID() + ".close()",
								this.baseButtonStyle,null,null,
								isc.Canvas.CENTER,
								" COLSPAN=4"
							)
						);
		}
		// end the table
		output.append("<\/TABLE>");

		return output.toString();
	},

    getDayNames : function () {
        if (isc.DateChooser._dayNames == null) {
            // Don't hard-code day-names -- we need them to be localizeable
            // isc.DateChooser._dayNames = ["Su", "Mo","Tu", "We", "Th", "Fr", "Sa"]
            var dateObj = new Date();
            isc.DateChooser._dayNames = dateObj.getShortDayNames(2);
        }
        return isc.DateChooser._dayNames;
    },

	getDayCellButtonHTML : function (date, style, state) {
        // null date == Special case for dates beyond 9999
        // This limit is enforced due to dates greater than 9999 causing a browser crash in IE
        // - also our parsing logic assumes a 4 digit date
        if (date == null) 
            return this.getCellButtonHTML("&nbsp;", null, style, false, false, isc.Canvas.CENTER);
        
		var selected = (this.chosenDate && (date.toShortDate() == this.chosenDate.toShortDate())),
            disabled = (date.getMonth() != this.month);

		var action = this.getID() + ".dateClick(" + date.getFullYear() + ","
                     + date.getMonth() + "," + date.getDate() + ");";

		return this.getCellButtonHTML(date.getDate(), action, style, selected, disabled, isc.Canvas.CENTER);
	},

    dateIsSelected : function (date) {
		return null
	},
    
	showPrevMonth : function () {
		if (--this.month == -1) {
			this.month = 11;
			this.year--;
		}
		this.markForRedraw();
	},

	showNextMonth : function () {
		if (++this.month == 12) {
			this.month = 0;
			this.year++;
		}
		this.markForRedraw();
	},

	showMonth : function (monthNum) {
		this.month = monthNum;
		if (this.monthMenu) this.monthMenu.hide();
		this.markForRedraw();
	},

	showMonthMenu : function () {
		if (!this.monthMenu) {
			// create the menu items using the date.getShortMonthName() for internationalization
			var monthItems = [[]],
				date = new Date(2001,0,1);
			for (var i = 0; i < 12; i++) {
				date.setMonth(i);
				monthItems[monthItems.length-1].add(
									{	contents:date.getShortMonthName(),
										action:this.getID()+".showMonth("+i+")"
									}
					);
				if ((i+1)%3 == 0) monthItems.add([]);
			}
			this.monthMenu = isc.ButtonTable.newInstance({
				left:this.getPageLeft()+5,
				top:this.getPageTop()+this.headerHeight,
				width:Math.min(this.getWidth(), 120),
				height:Math.min(this.getHeight()-this.headerHeight, 80),
				items:monthItems,
				visibility:isc.Canvas.HIDDEN,
				baseButtonStyle:this.baseButtonStyle
			});
            // (autoDraw is true, so it is drawn, with visibility hidden at this point)
			this.monthMenu.setPageLeft(this.getPageLeft() + ((this.width - this.monthMenu.width)/2));
		} else {
            // L, T, W, H
            var top = this.getPageTop()+this.headerHeight,
				width = Math.min(this.getWidth(), 120),
				height = Math.min(this.getHeight()-this.headerHeight, 80),
                left = this.getPageLeft() + ((this.width - width)/2)

            this.monthMenu.setPageRect(left, top, width, height);
        }
        
        // We show the month menu modally.  This means if the user clicks outside it, we
        // will not allow the click to carry on down, so it will hide the month menu (and then
        // dismiss the monthMenu's click mask), but won't fire the click action on the 
        // DateChooser's click mask and hide the entire date chooser.
        // As with all modal clickMasks, for us to float the month menu above it, we need the
        // month menu to be a top-level element (which is how it's currently implemented)
		this.monthMenu.showModal();
	},

	showPrevYear : function () {
		this.year--;
		this.markForRedraw();
	},

	showNextYear : function () {
		this.year++;
		this.markForRedraw();
	},

	showYear : function (yearNum) {
		this.year = yearNum;
		if (this.yearMenu) this.yearMenu.hide();
		this.markForRedraw();
	},

	showYearMenu : function () {
		if (!this.yearMenu) {
			var yearItems = [[]];
			for (var i = 0; i <= (this.endYear-this.startYear); i++) {
				var year = i+this.startYear;
				yearItems[yearItems.length-1].add({contents:year,
									action:this.getID()+".showYear("+year+")"
								});
				if ((i+1)%3 == 0) yearItems.add([]);
			}
			this.yearMenu = isc.ButtonTable.newInstance({
				top:this.getPageTop()+this.headerHeight,
				width:Math.min(this.getWidth(), 120),
				height:Math.min(this.getHeight()-this.headerHeight, 80),
				items:yearItems,
				visibility:isc.Canvas.HIDDEN,
				baseButtonStyle:this.baseButtonStyle
			});
            // (autoDraw is true, so it is drawn, with visibility hidden at this point)
			this.yearMenu.setPageLeft(this.getPageLeft() + ((this.width - this.yearMenu.width)/2));

		} else {
            // L, T, W, H
            var top = this.getPageTop()+this.headerHeight,
				width = Math.min(this.getWidth(), 120),
				height = Math.min(this.getHeight()-this.headerHeight, 80),
                left = this.getPageLeft() + ((this.width - width)/2)

            this.yearMenu.setPageRect(left, top, width, height);
        }
        
		//XXX it'd be nice to hilite the current year somehow...
		this.yearMenu.showModal();
	},

	dateClick : function (year, month, day) {
		var date = this.lastSelectedDate = new Date(year, month, day);

        this.dataChanged();

    	if (window.dateClickCallback) {
			// if it's a string, normalize it to a function
			if (isc.isA.String(window.dateClickCallback)) {
                window.dateClickCallback = new Function("date",window.dateClickCallback);
            }
			// and call it, passing the date
			window.dateClickCallback(date)
		}

        if (this.autoHide) this.hide();
		if (this.autoClose) this.close();
		return date;
	},
    
    // Observable dataChanged function (fired from dateClick)

    //> @method dateChooser.dataChanged()
    // Method to override or observe in order to be notified when a user picks a date value.
    // <P>
    // Has no default behavior (so no need to call Super).
    // <P>
    // Use +link{getData()} to get the current date value.
    // 
    // @visibility external
    //<
    dataChanged : function () {
    },
    
    close : function () {
        this.hideClickMask();
        if (this.yearMenu && this.yearMenu.isVisible()) this.yearMenu.hide();
        if (this.monthMenu && this.monthMenu.isVisible()) this.monthMenu.hide();
        if (this.isDrawn()) this.clear();
    }

});
//!<Deferred




// For efficiency we want to re-use a single date-chooser widget in most cases.
// Add a class method for this
isc.DateChooser.addClassMethods({
    
    // getSharedDateChooser()   Simple method to return a standard date chooser.
    // Used by the DateItem
    getSharedDateChooser : function (properties) {

        if (!this._globalDC) {
        
            this._globalDC = this.create(properties, {
                
                _generated:true,
                // When re-using a DateChooser, we're almost certainly displaying it as a 
                // floating picker rather than an inline element. Apply the common options for 
                // a floating picker
                autoHide:true,
                showCancelButton:true
                
            });
            
            return this._globalDC;
        }
        
        isc.addProperties(this._globalDC, properties);
        return this._globalDC;
    }
    
});