Subversion Repositories eFlore/Applications.cel

/*

 * Ext JS Library 2.0.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * licensing@extjs.com

 *

 * http://extjs.com/license

 */

/**

 * @class Ext.form.DateField

 * @extends Ext.form.TriggerField

 * Provides a date input field with a {@link Ext.DatePicker} dropdown and automatic date validation.

* @constructor

* Create a new DateField

* @param {Object} config

 */

Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {

    /**

     * @cfg {String} format

     * The default date format string which can be overriden for localization support.  The format must be

     * valid according to {@link Date#parseDate} (defaults to 'm/d/y').

     */

    format : "m/d/y",

    /**

     * @cfg {String} altFormats

     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined

     * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').

     */

    altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d",

    /**

     * @cfg {Array} disabledDays

     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).

     */

    disabledDays : null,

    /**

     * @cfg {String} disabledDaysText

     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')

     */

    disabledDaysText : "Disabled",

    /**

     * @cfg {Array} disabledDates

     * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular

     * expression so they are very powerful. Some examples:

     * <ul>

     * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>

     * <li>["03/08", "09/16"] would disable those days for every year</li>

     * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>

     * <li>["03/../2006"] would disable every day in March 2006</li>

     * <li>["^03"] would disable every day in every March</li>

     * </ul>

     * In order to support regular expressions, if you are using a date format that has "." in it, you will have to

     * escape the dot when restricting dates. For example: ["03\\.08\\.03"].

     */

    disabledDates : null,

    /**

     * @cfg {String} disabledDatesText

     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')

     */

    disabledDatesText : "Disabled",

    /**

     * @cfg {Date/String} minValue

     * The minimum allowed date. Can be either a Javascript date object or a string date in a

     * valid format (defaults to null).

     */

    minValue : null,

    /**

     * @cfg {Date/String} maxValue

     * The maximum allowed date. Can be either a Javascript date object or a string date in a

     * valid format (defaults to null).

     */

    maxValue : null,

    /**

     * @cfg {String} minText

     * The error text to display when the date in the cell is before minValue (defaults to

     * 'The date in this field must be after {minValue}').

     */

    minText : "The date in this field must be equal to or after {0}",

    /**

     * @cfg {String} maxText

     * The error text to display when the date in the cell is after maxValue (defaults to

     * 'The date in this field must be before {maxValue}').

     */

    maxText : "The date in this field must be equal to or before {0}",

    /**

     * @cfg {String} invalidText

     * The error text to display when the date in the field is invalid (defaults to

     * '{value} is not a valid date - it must be in the format {format}').

     */

    invalidText : "{0} is not a valid date - it must be in the format {1}",

    /**

     * @cfg {String} triggerClass

     * An additional CSS class used to style the trigger button.  The trigger will always get the

     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'

     * which displays a calendar icon).

     */

    triggerClass : 'x-form-date-trigger',

    /**

     * @cfg {String/Object} autoCreate

     * A DomHelper element spec, or true for a default element spec (defaults to

     * {tag: "input", type: "text", size: "10", autocomplete: "off"})

     */

    // private

    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},

    initComponent : function(){

        Ext.form.DateField.superclass.initComponent.call(this);

        if(typeof this.minValue == "string"){

            this.minValue = this.parseDate(this.minValue);

        }

        if(typeof this.maxValue == "string"){

            this.maxValue = this.parseDate(this.maxValue);

        }

        this.ddMatch = null;

        if(this.disabledDates){

            var dd = this.disabledDates;

            var re = "(?:";

            for(var i = 0; i < dd.length; i++){

                re += dd[i];

                if(i != dd.length-1) re += "|";

            }

            this.ddMatch = new RegExp(re + ")");

        }

    },

    // private

    validateValue : function(value){

        value = this.formatDate(value);

        if(!Ext.form.DateField.superclass.validateValue.call(this, value)){

            return false;

        }

        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid

             return true;

        }

        var svalue = value;

        value = this.parseDate(value);

        if(!value){

            this.markInvalid(String.format(this.invalidText, svalue, this.format));

            return false;

        }

        var time = value.getTime();

        if(this.minValue && time < this.minValue.getTime()){

            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));

            return false;

        }

        if(this.maxValue && time > this.maxValue.getTime()){

            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));

            return false;

        }

        if(this.disabledDays){

            var day = value.getDay();

            for(var i = 0; i < this.disabledDays.length; i++) {

            	if(day === this.disabledDays[i]){

            	    this.markInvalid(this.disabledDaysText);

                    return false;

            	}

            }

        }

        var fvalue = this.formatDate(value);

        if(this.ddMatch && this.ddMatch.test(fvalue)){

            this.markInvalid(String.format(this.disabledDatesText, fvalue));

            return false;

        }

        return true;

    },

    // private

    // Provides logic to override the default TriggerField.validateBlur which just returns true

    validateBlur : function(){

        return !this.menu || !this.menu.isVisible();

    },

    /**

     * Returns the current date value of the date field.

     * @return {Date} The date value

     */

    getValue : function(){

        return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";

    },

    /**

     * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid

     * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}

     * (the default format used is "m/d/y").

     * <br />Usage:

     * <pre><code>

//All of these calls set the same date value (May 4, 2006)

//Pass a date object:

var dt = new Date('5/4/06');

dateField.setValue(dt);

//Pass a date string (default format):

dateField.setValue('5/4/06');

//Pass a date string (custom format):

dateField.format = 'Y-m-d';

dateField.setValue('2006-5-4');

</code></pre>

     * @param {String/Date} date The date or valid date string

     */

    setValue : function(date){

        Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));

    },

    // private

    parseDate : function(value){

        if(!value || Ext.isDate(value)){

            return value;

        }

        var v = Date.parseDate(value, this.format);

        if(!v && this.altFormats){

            if(!this.altFormatsArray){

                this.altFormatsArray = this.altFormats.split("|");

            }

            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){

                v = Date.parseDate(value, this.altFormatsArray[i]);

            }

        }

        return v;

    },

    // private

    onDestroy : function(){

        if(this.menu) {

            this.menu.destroy();

        }

        if(this.wrap){

            this.wrap.remove();

        }

        Ext.form.DateField.superclass.onDestroy.call(this);

    },

    // private

    formatDate : function(date){

        return Ext.isDate(date) ? date.dateFormat(this.format) : date;

    },

    // private

    menuListeners : {

        select: function(m, d){

            this.setValue(d);

        },

        show : function(){ // retain focus styling

            this.onFocus();

        },

        hide : function(){

            this.focus.defer(10, this);

            var ml = this.menuListeners;

            this.menu.un("select", ml.select,  this);

            this.menu.un("show", ml.show,  this);

            this.menu.un("hide", ml.hide,  this);

        }

    },

    // private

    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker

    onTriggerClick : function(){

        if(this.disabled){

            return;

        }

        if(this.menu == null){

            this.menu = new Ext.menu.DateMenu();

        }

        Ext.apply(this.menu.picker,  {

            minDate : this.minValue,

            maxDate : this.maxValue,

            disabledDatesRE : this.ddMatch,

            disabledDatesText : this.disabledDatesText,

            disabledDays : this.disabledDays,

            disabledDaysText : this.disabledDaysText,

            format : this.format,

            minText : String.format(this.minText, this.formatDate(this.minValue)),

            maxText : String.format(this.maxText, this.formatDate(this.maxValue))

        });

        this.menu.on(Ext.apply({}, this.menuListeners, {

            scope:this

        }));

        this.menu.picker.setValue(this.getValue() || new Date());

        this.menu.show(this.el, "tl-bl?");

    },

    beforeBlur : function(){

        var v = this.parseDate(this.getRawValue());

        if(v){

            this.setValue(v);

        }

    }

    /**

     * @cfg {Boolean} grow @hide

     */

    /**

     * @cfg {Number} growMin @hide

     */

    /**

     * @cfg {Number} growMax @hide

     */

    /**

     * @hide

     * @method autoSize

     */

});

Ext.reg('datefield', Ext.form.DateField);