datechooser.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 

// This file creates a mini-calendar that is used to pick a date, for example, you might have a
// button next to a form date field that brings this file up.




//>	@class	DateChooser
//
// Simple interactive calendar interface used to pick a date.
// Used by the +link{class:dateItem} class.
//
// @treeLocation Client Reference/Forms
// @visibility external
//<

// create a special canvas to show the days in a month
isc.ClassFactory.defineClass("DateChooser", "ButtonTable");

isc.DateChooser.addProperties({
	showHeader:true,
	headerHeight:20,

    //> @attr DateChooser.showTodayButton (boolean : true : IRW)
    // Determines whether the "Today" button will be displayed, allowing the user to select 
    // the current date.
    // @visibility external
    //<
	showTodayButton:true,

    //> @attr DateChooser.showCancelButton (boolean : false : IRW)
    // Determines whether the "Cancel" button will be displayed.
    // @visibility external
    //<    
	showCancelButton:false,
    
    //> @attr DateChooser.todayButtonTitle  (string:"Today":IRW)
    // Title for "Today" button.
    // @group i18nMessages
    // @visibility external
    //<
    todayButtonTitle:"Today",
    
    //> @attr DateChooser.cancelButtonTitle  (string:"Cancel":IRW)
    // Title for the cancellation button.
    // @group i18nMessages
    // @visibility external
    //<
    cancelButtonTitle:"Cancel",
    
    
	showYearButtons:true,
	showYearChooser:true,
	showMonthButtons:true,
	showMonthChooser:true,
    
    // Make the buttons skinnable
    //> @attr DateChooser.prevYearIcon (URL : "[SKIN]doubleArrow_left.gif" : IRW)
    // Icon for the previous year button
    // @see attr:DateChooser.showDoubleYearIcon
    // @visibility external
    //<
    prevYearIcon:"[SKIN]doubleArrow_left.gif",
    
    //> @attr DateChooser.prevYearIconWidth (integer : 14 : IRW)
    // Width of the icon for the previous year button
    // @visibility external
    //<
    prevYearIconWidth:14,
    //> @attr DateChooser.prevYearIconHeight (integer : 7 : IRW)
    // Height of the icon for the previous year button
    // @visibility external
    //<
    prevYearIconHeight:7,
    
    //> @attr DateChooser.prevMonthIcon (URL : "[SKIN]arrow_left.gif" : IRW)
    // Icon for the previous month button
    // @visibility external
    //<
    prevMonthIcon:"[SKIN]arrow_left.gif",
    
    //> @attr DateChooser.prevMonthIconWidth (integer : 7 : IRW)
    // Width of the icon for the previous month button
    // @visibility external
    //<
    prevMonthIconWidth:7,
    
    //> @attr DateChooser.prevMonthIconHeight (integer : 7 : IRW)
    // Height of the icon for the previous month button
    // @visibility external
    //<
    prevMonthIconHeight:7,
    
    //> @attr DateChooser.nextYearIcon (URL : "[SKIN]doubleArrow_right.gif" : IRW)
    // Icon for the next year button
    // @see attr:DateChooser.showDoubleYearIcon
    // @visibility external
    //<
    nextYearIcon:"[SKIN]doubleArrow_right.gif",

    //> @attr DateChooser.nextYearIconWidth (integer : 14 : IRW)
    // Width of the icon for the next year button
    // @visibility external
    //<
    nextYearIconWidth:14,    
    
    //> @attr DateChooser.nextYearIconHeight (integer : 7 : IRW)
    // Height of the icon for the next year button
    // @visibility external
    //<
    nextYearIconHeight:7,
    
    //> @attr DateChooser.nextMonthIcon (URL : "[SKIN]arrow_right.gif" : IRW)
    // Icon for the next month button
    // @visibility external
    //< 
    nextMonthIcon:"[SKIN]arrow_right.gif",
    
    //> @attr DateChooser.nextMonthIconWidth (integer : 7 : IRW)
    // Width of the icon for the next month button
    // @visibility external
    //<
    nextMonthIconWidth:7,
    
    //> @attr DateChooser.nextMonthIconHeight (integer : 7 : IRW)
    // Height of the icon for the next month button
    // @visibility external
    //<
    nextMonthIconHeight:7,
    
    //> @attr DateChooser.showDoubleYearIcon (boolean : true : IRW)
    // If this property is set to true the previous and next year buttons will render out the 
    // previous and next month button icons twice rather than using the
    // +link{dateChooser.prevYearIcon} and +link{dateChooser.nextYearIcon}.
    // <P>
    // Set to <code>true</code> by default as not all skins contain media for the year icons.
    // @visibility external
    //<
    // This is really for back-compat (pre 6.1).
    // We intend to set this to true and provide year icon media in all skins we provide from this
    // point forward, but we don't want to break existing customized skins
    showDoubleYearIcon:true,

    
	startYear:1990,
	endYear:2010,

    //> @attr DateChooser.firstDayOfWeek  (integer : 0 : IR)
    // Day of the week to show in the first column.  0=Sunday, 1=Monday, ..., 6=Saturday.
    // @group appearance
    // @visibility external
    //<
    
    firstDayOfWeek:0,

    // an arbitrarily chosen, reasonable-looking size.  To improve on this, we need to switch
    // to a GridRenderer-based implementation, where we can get predictable-size square cells
	defaultWidth:150,	
	defaultHeight:171,		
    
    
	year:new Date().getFullYear(),		// full year number
	month:new Date().getMonth(),		// 0-11
	chosenDate:new Date(),	// JS date object -- defaults to today

    //>@attr DateChooser.skinImgDir (string : "images/common/" : IRWA)
    // Overridden directory where images for this widget (such as the month and year button icons)
    // may be found.
    // @visibility external
    //<
	skinImgDir:"images/common/",

    //> @attr DateChooser.baseButtonStyle (string:"dateChooserButton":IRW)
    // Base css style applied to this picker's buttons. Will have "Over", "Selected" and "Down"
    // suffix appended as the user interacts with buttons.
    // @visibility external
    //< 
	baseButtonStyle:"dateChooserButton",

    //> @attr DateChooser.baseWeekdayStyle (string:null:IRW)
    // Base css style applied to weekdays. Will have "Over", "Selected" and "Down"
    // suffix appended as the user interacts with buttons.  Defaults to +link{baseButtonStyle}.
    // @visibility external
    //<    

    //> @attr DateChooser.baseWeekendStyle (string:null:IRW)
    // Base css style applied to weekends. Will have "Over", "Selected" and "Down"
    // suffix appended as the user interacts with buttons.  Defaults to +link{baseWeekdayStyle}.
    // @visibility external
    //<    

    //> @attr DateChooser.alternateWeekStyles (boolean:null:IRW)
    // Whether alternating weeks should be drawn in alternating styles. If enabled, the cell style
    // for alternate rows will have +link{alternateStyleSuffix} appended to it.
    // @visibility external
    //<    

    //> @attr DateChooser.alternateStyleSuffix (string:"Dark":IRW)
    // The text appended to the style name when using +link{alternateWeekStyles}.
    // @visibility external
    //<    
    alternateStyleSuffix:"Dark",
    
    //> @attr DateChooser.headerStyle (string:"dateChooserButtonDisabled":IRW)
    // CSS style applied to the day-of-week headers.
    // @visibility external
    //<    
	headerStyle:"dateChooserButtonDisabled",
    
    //> @attr DateChooser.baseNavButtonStyle (string:null:IRW)
    // CSS style to apply to navigation buttons and date display at the top of the
    // component. If null, the CSS style specified in +link{baseButtonStyle} is used.
    // @visibility external
    //< 

    
    useBackMask:true,
    
    canFocus:true    
});

//!>Deferred
isc.DateChooser.addMethods({

    // Override show() to show the clickMask if autoClose is true
    // Note: If we're showing this date chooser in a separate window, this is unnecessary, as the
    // user will be unable to click on any part of the window that isn't covered by the date-chooser
    // but will do no harm.
    show : function () {
        var returnVal = this.Super("show", arguments);
        
        if (this.autoClose) {
			this.showClickMask(this.getID()+".close()",true);		
        	this.bringToFront();
        }
    },
        
    // picker interface

    //> @method dateChooser.setData()
    // Set the picker to show the given date.
    // 
    // @param date (Date) new value
    // @visibility external
    //<
    setData : function (data) {
        //if (!this.callingFormItem) return;
        if (!isc.isA.Date(data)) data = new Date();

        this.year = data.getFullYear();
        this.month = data.getMonth();
        this.chosenDate = data;
        this.markForRedraw();
    },

    //> @method dateChooser.getData()
    // Get the current value of the picker.
    // <P>
    // See +link{dataChanged()} for how to respond to the user picking a date.
    //
    // @return (Date) current date
    // @visibility external
    //<
    getData : function () {
        return this.lastSelectedDate || this.chosenDate;
    },    

	getInnerHTML : function () {
		if (!this.showHeader) this.headerHeight = 0;

        this.baseWeekdayStyle = this.baseWeekdayStyle || this.baseButtonStyle;
        this.baseWeekendStyle = this.baseWeekendStyle || this.baseWeekdayStyle;
        var baseHeaderStyle = this.baseNavButtonStyle || this.baseButtonStyle;

		// create a table to show the days in the month
		var d = new Date(this.year, this.month, 1),
			displayDate = new Date(this.year, this.month, 1),
			output = isc.SB.create();

		if (this.showHeader) {
			// output a row with the month/year and arrows
			output.append("<TABLE WIDTH=100%",
                          " HEIGHT=" , (this.headerHeight+1), 
                          " CELLSPACING=", this.cellSpacing, 
                          " CELLPADDING=", this.cellPadding, 
                          " BORDER=" , this.cellBorder , "><TR>");

			if (this.showYearButtons) {
                var prevYearIconHTML;
                if (this.showDoubleYearIcon) {
                    var monthIconHTML = this.imgHTML(this.prevMonthIcon, this.prevMonthIconWidth,
                                                             this.prevMonthIconHeight);
                    prevYearIconHTML = disableNextYear ? "&nbsp;" :
                                       "<NOBR>"+ monthIconHTML + monthIconHTML + "<\/NOBR>";
                } else {
                    prevYearIconHTML = disableNextYear ? "&nbsp;" :
                                            this.imgHTML(this.prevYearIcon, this.prevYearIconWidth,
                                                             this.prevYearIconHeight);
                }
				output.append(this.getCellButtonHTML(prevYearIconHTML, 
                                                     this.getID()+".showPrevYear()", 
                                                     baseHeaderStyle,
                                                     null, null, isc.Canvas.CENTER,
                                                     " WIDTH=15"));
			}
			if (this.showMonthButtons) {
				output.append(
                        this.getCellButtonHTML(this.imgHTML(this.prevMonthIcon,
                                                             this.prevMonthIconWidth,
                                                             this.prevMonthIconHeight),
                                               this.getID()+".showPrevMonth()", 
                                               baseHeaderStyle, null, null,
                                               isc.Canvas.CENTER, 
                                               " WIDTH=15"));
			}
			if (this.showMonthChooser) {
				output.append(
                        this.getCellButtonHTML(displayDate.getShortMonthName(), 
                                               this.getID()+".showMonthMenu()", 
                                               baseHeaderStyle, 
                                               null, null,
                                               isc.Canvas.RIGHT, 
                                               " WIDTH=50%"));
			} else {
				output.append(
                        this.getCellHTML(displayDate.getShortMonthName(), 
                                         baseHeaderStyle + "Disabled"));
			}
			if (this.showYearChooser) {
				output.append(
                        this.getCellButtonHTML(displayDate.getFullYear(), 
                                               this.getID()+".showYearMenu()", 
                                               baseHeaderStyle, null, null,  
                                               isc.Canvas.LEFT, " WIDTH=50%"));
			} else {
				output.append(