dateitem.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
 */

 


// Class will not work without the ListGrid
if (isc.ListGrid) {





//>	@class	DateItem
//
// Item for manipulating Dates.
// <p>
// Can be rendered as a text field, or as 3 selects for day, month, year.  Includes optional
// pop-up picker.
//
// @visibility external
// @example dateItem
//<
isc.defineClass("DateItem", "ContainerItem");

isc.defineClass("DateTimeItem", "DateItem");

isc.DateItem.addClassProperties({
	//>	@classAttr	DateItem.mapCache		(object : {} : IRW)
	//		Cache for the map of day, month and year values 
	//			-- so we don't have to calculate the values over and over.
	//		Items are keyed in the map by "<code>day|month|year</code>.<code>start</code>.<code>end</code>".
	//<
	mapCache:{},	
 
    //>	@const	DateItem.TEXT_FIELD     (object : {...} : IRW)
	//		Text field to hold the entire date in "type in" format, if 'useTextField' is true
    //      for an item.
	//<	
    TEXT_FIELD:    {name:"dateTextField",   type:"text",    changeOnBlur:true,
                    
                        changeOnKeypress:false,
                        // Override 'saveValue' to notify the DateItem that the value has
                        // been changed and needs updating.
                        saveValue:function () {
                            this.Super("saveValue", arguments);
                            this.parentItem.updateValue();
                        },
                        shouldSaveValue:false,
                        // Determine our size based on our parents specified textBox size
                        getInnerWidth : function () {
                            if (this.parentItem) return this.parentItem.getTextBoxWidth();
                            return this.Super("getInnerWidth", arguments);
                        }
                   },
    
	//>	@const	DateItem.DAY_SELECTOR		(object : {...} : IRW)
	//		Select item to hold the day part of the date.
	//<	
	DAY_SELECTOR:	{name:"daySelector",		prompt:"Choose a day", type:"select", 	
                        valueMap:"this.parentItem.getDayOptions()", shouldSaveValue:false,
                        // Override saveValue to update the parent.
                        
                        saveValue:function () {
                            this.Super("saveValue", arguments);
                            this.parentItem.updateValue();
                        },
                        cssText:"padding-left:3px;",
                        width:45},

	//>	@const	DateItem.MONTH_SELECTOR		(object : {...} : IRW)
	//		Select item to hold the month part of the date.
	//<	
	MONTH_SELECTOR:	{name:"monthSelector",	prompt:"Choose a month", type:"select", 	
                        valueMap:"this.parentItem.getMonthOptions()", shouldSaveValue:false,
                        saveValue:function () {
                            this.Super("saveValue", arguments);
                            this.parentItem.updateValue();
                        },
                        width:55},
	

	//>	@const	DateItem.YEAR_SELECTOR		(object : {...} : IRW)
	//		Select item to hold the year part of the date.
	//<	
	YEAR_SELECTOR:	{name:"yearSelector",		prompt:"Choose a year", type:"select",	
                        valueMap:"this.parentItem.getYearOptions()", shouldSaveValue:false,
                        saveValue:function () {
                            this.Super("saveValue", arguments);
                            this.parentItem.updateValue();
                        },
                        cssText:"padding-left:3px;",
                        width:60},
	
	//>	@type	DateItemSelectorFormat
	DAY_MONTH_YEAR:"DMY",		//	@value	isc.DateItem.DAY_MONTH_YEAR		Output fields in day, month, year order.
	MONTH_DAY_YEAR:"MDY",		//	@value	isc.DateItem.MONTH_DAY_YEAR		Output fields in month, day, year order.
	YEAR_MONTH_DAY:"YMD",		//	@value	isc.DateItem.YEAR_MONTH_DAY		Output fields in year, month, day order.
	//<

    DEFAULT_START_DATE:new Date(1995, 0, 1),
    DEFAULT_END_DATE:new Date(2015, 11, 31),
    DEFAULT_CENTURY_THRESHOLD:25,
    
	chooserWidth:150,			//	@classAttr	isc.DateItem.chooserWidth	(number)	Width of the date chooser -- used to choose a date graphically.
	chooserHeight:171			//	@classAttr	isc.DateItem.chooserHeight	(number)	Height of the date chooser -- used to choose a date graphically.

});

isc.DateItem.addProperties({
    
    // Default to 150 wide
    // This is an appropriate default if we're showing the text field 
    // If we're showing the selectors, this value will be forced to 200 during setItems
    width:150,
    
    cellPadding:0,
    
    pickerConstructor: "DateChooser",

    //> @attr dateItem.pickerProperties (DateChooser : see below : [IR])
    // Properties for the +link{DateChooser} created by this form item.
    //<
    
    pickerProperties: {
        width: isc.DateItem.chooserWidth,
        height: isc.DateItem.chooserHeight,
        border:"1px solid black;",
        // show a cancel button that closes the window
        showCancelButton: true,
        autoHide: true
    },

    //>	@attr	dateItem.useTextField   (boolean    : false : IRW)
    //      Should we show the date in a text field, or as 3 select boxes?
    // @group basics
    // @visibility external
    // @example dateItem
    //<                                            
    useTextField:false,
    
    //> @attr   dateItem.textAlign  (Alignment : isc.Canvas.RIGHT : IRW)
    // If +link{dateItem.useTextField} is <code>true</code> this property governs the alignment
    // of text within the text field.
    // @group appearance
    // @visibility external
    //<
    textAlign:isc.Canvas.RIGHT,
    
    //> @attr dateItem.enforceDate  (boolean : false : IRWA)
    // Can this field be set to a non-date value [other than null]?
    // <P>
    // When set to true, the value of the FormItem will <b>always</b> be a valid Date or null.
    // Even a programmatic call to setValue() with a value other than a date,
    // such as <code>dateItem.setValue("[Enter a date]")</code>, will be ignored.
    // <P>
    // When set to false, a user may enter value that is not a valid date (for example, "Not
    // applicable") and the value will not immediately be flagged as an error.  However note
    // that for the value to actually pass validation you would need to declare the field as
    // not of "date" type, for example:
    // <pre>
    //     {name:"startDate", type:"dateOrOther", editorType:"DateItem", useTextField:true },
    // </pre>
    // The type "dateOrOther" could be declared as a +link{SimpleType}, with validators that
    // will accept either a valid date or certain special Strings (like "Not Available").
    // <P>
    // Note that if +link{DateItem.useTextField} is false for the dateItem, non date values are
    // not allowed regardless of this property's value.
    //<
    enforceDate:false,
    
    // Allow overriding of properties on the text or select fields on a per-instance basis

    
    //textFieldProperties:null,
    //daySelectorProperties:null,
    //monthSelectorProperties:null,
    //yearSelectorProperties:null,
 
    //>	@attr	dateItem.invalidDateStringMessage   (string : "Invalid date" : IRW)
    //  Validation error message to display if the user enters an invalid date
    // @visibility external
    //<                                            
    invalidDateStringMessage:"Invalid date",
    
    //>	@attr	dateItem.showPickerIcon (boolean : true : IRW)
    //      Should we show the pick button icon?
    // @visibility pickerIcon
    //<
    showPickerIcon:true,
    
    //>	@attr	dateItem.pickerIconWidth (number : 20: IRW)
    // Width for the date item's pickerIcon.
    // @visibility pickerIcon
    //<    
    pickerIconWidth:20,

    //>	@attr	dateItem.pickerIconHeight (number : 20 : IRW)
    // Height for the date item's pickerIcon.
    // @visibility pickerIcon
    //<    
    pickerIconHeight:20,
    
    //>	@attr	dateItem.pickerIconSrc (SCImgURL : "[SKIN]/DynamicForm/DatePicker_icon.gif" : IRW)
    // Src for the picker icon image
    // @visibility pickerIcon
    //<
    pickerIconSrc:"[SKIN]/DynamicForm/DatePicker_icon.gif", 
    
    // give the picker icon 3px of horizontal space by default
    pickerIconHSpace:3,
    
    //>	@attr	dateItem.pickerIconProperties (object : {...} : IRW)
    //  properties for the pickerIcon - sets up a prompt and horizontal spacing
    // @visibility pickerIcon
    //<
    pickerIconProperties:{
        prompt:"Show Date Chooser"
    },

    
        
    //>	@attr	dateItem.startDate		(Date : 1/1/1995 : IRW)
	// Minimum date the selectors will allow the user to pick.
	//		@group	appearance
    // @visibility external
	//<
    startDate:isc.DateItem.DEFAULT_START_DATE,    

    //>	@attr	dateItem.endDate		(Date : 12/31/2015 : IRW)
	// Maximum date the selectors will allow the user to pick.
	//		@group	appearance
    // @visibility external
	//<
    endDate:isc.DateItem.DEFAULT_END_DATE,

    //>	@attr	dateItem.centuryThreshold		(number : 25 : IRW)
	// Only used if we're showing the date in a text field. When parsing a date, if the year
    // is specified with only 2 digits and is less than the centuryThreshold, then the year will
    // be assumed to be 20xx; otherwise it will be interpreted according to default browser
    // behaviour, which will consider it to be 19xx.
	//		@group	appearance
    // @visibility external
	//<
    centuryThreshold:isc.DateItem.DEFAULT_CENTURY_THRESHOLD,
    
    //>	@attr	dateItem.displayFormat  (DateDisplayFormat : "toShortDate" : IRW)
    // If +link{dateItem.useTextField} is <code>true</code> this property can be used to 
    // customize the format in which dates are displayed.<br>
    // Default setting is <code>"toShortDate"</code> which ensures that if the standard
    // shortDate format is modified via +link{Date.setShortDisplayFormat()} this format
    // will be picked up.<br>
    // Important: the display format and the +link{DateItem.inputFormat, inputFormat} 
    // for dateItems should always be set such that the format of strings displayed by this
    // item matches the expected format of strings the user enters.
    // @see dateItem.inputFormat
    // @visibility external
    //<
    displayFormat:"toShortDate"
    
    //> @attr  dateItem.inputFormat  (DateInputFormat : null : IRW)
    // If +link{dateItem.useTextField} is <code>true</code> this property can be used to specify
    // the input format for date strings. If unset, the input format will be picked up from the
    // Date class (see +link{Date.setInputFormat()}).<br>
    // Important: the input format and the +link{DateItem.displayFormat, displayFormat} 
    // for dateItems should always be set such that the format of strings displayed by this
    // item matches the expected format of strings the user enters.
    // @see dateItem.displayFormat
    // @visibility external
    //<
    //inputFormat:null,
    
    //>	@attr	dateItem.selectorFormat		(DateItemSelectorFormat : null : IRW)
    // If showing date selectors rather than the date text field (so when 
    // <code>this.useTextField</code> is false), this property allows customization of the 
    // order of the day, month and year selector fields. If unset these fields will match the
    // specified inputFormat for this item.
    //<
	//selectorFormat:null

});

isc.DateItem.addMethods({

    // if selectorFormt is unset, back off to standard inputFormat.
    getSelectorFormat : function () {
        if (this.selectorFormat) return this.selectorFormat;
        else if (this.inputFormat) return this.inputFormat;
        else return Date.getInputFormat();
    },

	//>	@method	dateItem.setItems()	(A)
	//
	// 	Override the setItems() routine to set the order of the fields according to this.dateFormat
	//<
	setItems : function (itemList) {
    
		var DI = isc.DateItem,
			format = this.getSelectorFormat()
		;
        
        if (itemList != null && itemList.length != 0) {
            this.logWarn("setItems() called for dateItem with itemList:" + itemList + 
                            " - ignoring, and making use of default date fields");
        }

		// create a new itemList
		itemList = this.items = [];