Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / DateField.html
diff --git a/docs/source/DateField.html b/docs/source/DateField.html
deleted file mode 100644 (file)
index 561ade9..0000000
+++ /dev/null
@@ -1,457 +0,0 @@
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
-  <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.form.DateField"></div>/**
- * @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
- * @xtype datefield
- */
-Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {
-    <div id="cfg-Ext.form.DateField-format"></div>/**
-     * @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 <tt>'m/d/Y'</tt>).
-     */
-    format : "m/d/Y",
-    <div id="cfg-Ext.form.DateField-altFormats"></div>/**
-     * @cfg {String} altFormats
-     * Multiple date formats separated by "<tt>|</tt>" to try when parsing a user input value and it
-     * does not match the defined format (defaults to
-     * <tt>'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|n-j|n/j'</tt>).
-     */
-    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|n-j|n/j",
-    <div id="cfg-Ext.form.DateField-disabledDaysText"></div>/**
-     * @cfg {String} disabledDaysText
-     * The tooltip to display when the date falls on a disabled day (defaults to <tt>'Disabled'</tt>)
-     */
-    disabledDaysText : "Disabled",
-    <div id="cfg-Ext.form.DateField-disabledDatesText"></div>/**
-     * @cfg {String} disabledDatesText
-     * The tooltip text to display when the date falls on a disabled date (defaults to <tt>'Disabled'</tt>)
-     */
-    disabledDatesText : "Disabled",
-    <div id="cfg-Ext.form.DateField-minText"></div>/**
-     * @cfg {String} minText
-     * The error text to display when the date in the cell is before <tt>{@link #minValue}</tt> (defaults to
-     * <tt>'The date in this field must be after {minValue}'</tt>).
-     */
-    minText : "The date in this field must be equal to or after {0}",
-    <div id="cfg-Ext.form.DateField-maxText"></div>/**
-     * @cfg {String} maxText
-     * The error text to display when the date in the cell is after <tt>{@link #maxValue}</tt> (defaults to
-     * <tt>'The date in this field must be before {maxValue}'</tt>).
-     */
-    maxText : "The date in this field must be equal to or before {0}",
-    <div id="cfg-Ext.form.DateField-invalidText"></div>/**
-     * @cfg {String} invalidText
-     * The error text to display when the date in the field is invalid (defaults to
-     * <tt>'{value} is not a valid date - it must be in the format {format}'</tt>).
-     */
-    invalidText : "{0} is not a valid date - it must be in the format {1}",
-    <div id="cfg-Ext.form.DateField-triggerClass"></div>/**
-     * @cfg {String} triggerClass
-     * An additional CSS class used to style the trigger button.  The trigger will always get the
-     * class <tt>'x-form-trigger'</tt> and <tt>triggerClass</tt> will be <b>appended</b> if specified
-     * (defaults to <tt>'x-form-date-trigger'</tt> which displays a calendar icon).
-     */
-    triggerClass : 'x-form-date-trigger',
-    <div id="cfg-Ext.form.DateField-showToday"></div>/**
-     * @cfg {Boolean} showToday
-     * <tt>false</tt> to hide the footer area of the DatePicker containing the Today button and disable
-     * the keyboard handler for spacebar that selects the current date (defaults to <tt>true</tt>).
-     */
-    showToday : true,
-    
-    <div id="cfg-Ext.form.DateField-startDay"></div>/**
-     * @cfg {Number} startDay
-     * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
-     */
-    startDay : 0,
-    
-    <div id="cfg-Ext.form.DateField-minValue"></div>/**
-     * @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).
-     */
-    <div id="cfg-Ext.form.DateField-maxValue"></div>/**
-     * @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).
-     */
-    <div id="cfg-Ext.form.DateField-disabledDays"></div>/**
-     * @cfg {Array} disabledDays
-     * An array of days to disable, 0 based (defaults to null). Some examples:<pre><code>
-// disable Sunday and Saturday:
-disabledDays:  [0, 6]
-// disable weekdays:
-disabledDays: [1,2,3,4,5]
-     * </code></pre>
-     */
-    <div id="cfg-Ext.form.DateField-disabledDates"></div>/**
-     * @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:<pre><code>
-// disable these exact dates:
-disabledDates: ["03/08/2003", "09/16/2003"]
-// disable these days for every year:
-disabledDates: ["03/08", "09/16"]
-// only match the beginning (useful if you are using short years):
-disabledDates: ["^03/08"]
-// disable every day in March 2006:
-disabledDates: ["03/../2006"]
-// disable every day in every March:
-disabledDates: ["^03"]
-     * </code></pre>
-     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
-     * In order to support regular expressions, if you are using a {@link #format date format} that has "." in
-     * it, you will have to escape the dot when restricting dates. For example: <tt>["03\\.08\\.03"]</tt>.
-     */
-    <div id="cfg-Ext.form.DateField-autoCreate"></div>/**
-     * @cfg {String/Object} autoCreate
-     * A {@link Ext.DomHelper DomHelper element specification object}, or <tt>true</tt> for the default element
-     * specification object:<pre><code>
-     * autoCreate: {tag: "input", type: "text", size: "10", autocomplete: "off"}
-     * </code></pre>
-     */
-
-    // private
-    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
-
-    // in the absence of a time value, a default value of 12 noon will be used
-    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
-    initTime: '12', // 24 hour format
-
-    initTimeFormat: 'H',
-
-    // PUBLIC -- to be documented
-    safeParse : function(value, format) {
-        if (/[gGhH]/.test(format.replace(/(\\.)/g, ''))) {
-            // if parse format contains hour information, no DST adjustment is necessary
-            return Date.parseDate(value, format);
-        } else {
-            // set time to 12 noon, then clear the time
-            var parsedDate = Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat);
-
-            if (parsedDate) {
-                return parsedDate.clearTime();
-            }
-        }
-    },
-
-    initComponent : function(){
-        Ext.form.DateField.superclass.initComponent.call(this);
-
-        this.addEvents(
-            <div id="event-Ext.form.DateField-select"></div>/**
-             * @event select
-             * Fires when a date is selected via the date picker.
-             * @param {Ext.form.DateField} this
-             * @param {Date} date The date that was selected
-             */
-            'select'
-        );
-
-        if(Ext.isString(this.minValue)){
-            this.minValue = this.parseDate(this.minValue);
-        }
-        if(Ext.isString(this.maxValue)){
-            this.maxValue = this.parseDate(this.maxValue);
-        }
-        this.disabledDatesRE = null;
-        this.initDisabledDays();
-    },
-
-    initEvents: function() {
-        Ext.form.DateField.superclass.initEvents.call(this);
-        this.keyNav = new Ext.KeyNav(this.el, {
-            "down": function(e) {
-                this.onTriggerClick();
-            },
-            scope: this,
-            forceKeyDown: true
-        });
-    },
-
-
-    // private
-    initDisabledDays : function(){
-        if(this.disabledDates){
-            var dd = this.disabledDates,
-                len = dd.length - 1,
-                re = "(?:";
-
-            Ext.each(dd, function(d, i){
-                re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
-                if(i != len){
-                    re += '|';
-                }
-            }, this);
-            this.disabledDatesRE = new RegExp(re + ')');
-        }
-    },
-
-    <div id="method-Ext.form.DateField-setDisabledDates"></div>/**
-     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
-     * @param {Array} disabledDates An array of date strings (see the <tt>{@link #disabledDates}</tt> config
-     * for details on supported values) used to disable a pattern of dates.
-     */
-    setDisabledDates : function(dd){
-        this.disabledDates = dd;
-        this.initDisabledDays();
-        if(this.menu){
-            this.menu.picker.setDisabledDates(this.disabledDatesRE);
-        }
-    },
-
-    <div id="method-Ext.form.DateField-setDisabledDays"></div>/**
-     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
-     * @param {Array} disabledDays An array of disabled day indexes. See the <tt>{@link #disabledDays}</tt>
-     * config for details on supported values.
-     */
-    setDisabledDays : function(dd){
-        this.disabledDays = dd;
-        if(this.menu){
-            this.menu.picker.setDisabledDays(dd);
-        }
-    },
-
-    <div id="method-Ext.form.DateField-setMinValue"></div>/**
-     * Replaces any existing <tt>{@link #minValue}</tt> with the new value and refreshes the DatePicker.
-     * @param {Date} value The minimum date that can be selected
-     */
-    setMinValue : function(dt){
-        this.minValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
-        if(this.menu){
-            this.menu.picker.setMinDate(this.minValue);
-        }
-    },
-
-    <div id="method-Ext.form.DateField-setMaxValue"></div>/**
-     * Replaces any existing <tt>{@link #maxValue}</tt> with the new value and refreshes the DatePicker.
-     * @param {Date} value The maximum date that can be selected
-     */
-    setMaxValue : function(dt){
-        this.maxValue = (Ext.isString(dt) ? this.parseDate(dt) : dt);
-        if(this.menu){
-            this.menu.picker.setMaxDate(this.maxValue);
-        }
-    },
-
-    <div id="method-Ext.form.DateField-getErrors"></div>/**
-     * Runs all of NumberFields validations and returns an array of any errors. Note that this first
-     * runs TextField's validations, so the returned array is an amalgamation of all field errors.
-     * The additional validation checks are testing that the date format is valid, that the chosen
-     * date is within the min and max date constraints set, that the date chosen is not in the disabledDates
-     * regex and that the day chosed is not one of the disabledDays.
-     * @param {Mixed} value The value to get errors for (defaults to the current field value)
-     * @return {Array} All validation errors for this field
-     */
-    getErrors: function(value) {
-        var errors = Ext.form.DateField.superclass.getErrors.apply(this, arguments);
-
-        value = this.formatDate(value || this.processValue(this.getRawValue()));
-
-        if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
-             return errors;
-        }
-
-        var svalue = value;
-        value = this.parseDate(value);
-        if (!value) {
-            errors.push(String.format(this.invalidText, svalue, this.format));
-            return errors;
-        }
-
-        var time = value.getTime();
-        if (this.minValue && time < this.minValue.clearTime().getTime()) {
-            errors.push(String.format(this.minText, this.formatDate(this.minValue)));
-        }
-
-        if (this.maxValue && time > this.maxValue.clearTime().getTime()) {
-            errors.push(String.format(this.maxText, this.formatDate(this.maxValue)));
-        }
-
-        if (this.disabledDays) {
-            var day = value.getDay();
-
-            for(var i = 0; i < this.disabledDays.length; i++) {
-                if (day === this.disabledDays[i]) {
-                    errors.push(this.disabledDaysText);
-                    break;
-                }
-            }
-        }
-
-        var fvalue = this.formatDate(value);
-        if (this.disabledDatesRE && this.disabledDatesRE.test(fvalue)) {
-            errors.push(String.format(this.disabledDatesText, fvalue));
-        }
-
-        return errors;
-    },
-
-    // private
-    // Provides logic to override the default TriggerField.validateBlur which just returns true
-    validateBlur : function(){
-        return !this.menu || !this.menu.isVisible();
-    },
-
-    <div id="method-Ext.form.DateField-getValue"></div>/**
-     * 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)) || "";
-    },
-
-    <div id="method-Ext.form.DateField-setValue"></div>/**
-     * 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 <tt>{@link #format}</tt> as the date format, according
-     * to the same rules as {@link Date#parseDate} (the default format used is <tt>"m/d/Y"</tt>).
-     * <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/2006');
-dateField.setValue(dt);
-
-//Pass a date string (default format):
-dateField.setValue('05/04/2006');
-
-//Pass a date string (custom format):
-dateField.format = 'Y-m-d';
-dateField.setValue('2006-05-04');
-</code></pre>
-     * @param {String/Date} date The date or valid date string
-     * @return {Ext.form.Field} this
-     */
-    setValue : function(date){
-        return 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 = this.safeParse(value, this.format),
-            af = this.altFormats,
-            afa = this.altFormatsArray;
-
-        if (!v && af) {
-            afa = afa || af.split("|");
-
-            for (var i = 0, len = afa.length; i < len && !v; i++) {
-                v = this.safeParse(value, afa[i]);
-            }
-        }
-        return v;
-    },
-
-    // private
-    onDestroy : function(){
-        Ext.destroy(this.menu, this.keyNav);
-        Ext.form.DateField.superclass.onDestroy.call(this);
-    },
-
-    // private
-    formatDate : function(date){
-        return Ext.isDate(date) ? date.dateFormat(this.format) : date;
-    },
-
-    <div id="method-Ext.form.DateField-onTriggerClick"></div>/**
-     * @method onTriggerClick
-     * @hide
-     */
-    // 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({
-                hideOnClick: false,
-                focusOnSelect: false
-            });
-        }
-        this.onFocus();
-        Ext.apply(this.menu.picker,  {
-            minDate : this.minValue,
-            maxDate : this.maxValue,
-            disabledDatesRE : this.disabledDatesRE,
-            disabledDatesText : this.disabledDatesText,
-            disabledDays : this.disabledDays,
-            disabledDaysText : this.disabledDaysText,
-            format : this.format,
-            showToday : this.showToday,
-            startDay: this.startDay,
-            minText : String.format(this.minText, this.formatDate(this.minValue)),
-            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
-        });
-        this.menu.picker.setValue(this.getValue() || new Date());
-        this.menu.show(this.el, "tl-bl?");
-        this.menuEvents('on');
-    },
-
-    //private
-    menuEvents: function(method){
-        this.menu[method]('select', this.onSelect, this);
-        this.menu[method]('hide', this.onMenuHide, this);
-        this.menu[method]('show', this.onFocus, this);
-    },
-
-    onSelect: function(m, d){
-        this.setValue(d);
-        this.fireEvent('select', this, d);
-        this.menu.hide();
-    },
-
-    onMenuHide: function(){
-        this.focus(false, 60);
-        this.menuEvents('un');
-    },
-
-    // private
-    beforeBlur : function(){
-        var v = this.parseDate(this.getRawValue());
-        if(v){
-            this.setValue(v);
-        }
-    }
-
-    <div id="cfg-Ext.form.DateField-grow"></div>/**
-     * @cfg {Boolean} grow @hide
-     */
-    <div id="cfg-Ext.form.DateField-growMin"></div>/**
-     * @cfg {Number} growMin @hide
-     */
-    <div id="cfg-Ext.form.DateField-growMax"></div>/**
-     * @cfg {Number} growMax @hide
-     */
-    <div id="method-Ext.form.DateField-autoSize"></div>/**
-     * @hide
-     * @method autoSize
-     */
-});
-Ext.reg('datefield', Ext.form.DateField);
-</pre>    
-</body>
-</html>
\ No newline at end of file