source: trunk/web/addons/job_monarch/lib/extjs/source/widgets/form/DateField.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 13.2 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9/**
10 * @class Ext.form.DateField
11 * @extends Ext.form.TriggerField
12 * Provides a date input field with a {@link Ext.DatePicker} dropdown and automatic date validation.
13* @constructor
14* Create a new DateField
15* @param {Object} config
16 */
17Ext.form.DateField = Ext.extend(Ext.form.TriggerField,  {
18    /**
19     * @cfg {String} format
20     * The default date format string which can be overriden for localization support.  The format must be
21     * valid according to {@link Date#parseDate} (defaults to 'm/d/Y').
22     */
23    format : "m/d/Y",
24    /**
25     * @cfg {String} altFormats
26     * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
27     * format (defaults to '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').
28     */
29    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",
30    /**
31     * @cfg {String} disabledDaysText
32     * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
33     */
34    disabledDaysText : "Disabled",
35    /**
36     * @cfg {String} disabledDatesText
37     * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
38     */
39    disabledDatesText : "Disabled",
40    /**
41     * @cfg {String} minText
42     * The error text to display when the date in the cell is before minValue (defaults to
43     * 'The date in this field must be after {minValue}').
44     */
45    minText : "The date in this field must be equal to or after {0}",
46    /**
47     * @cfg {String} maxText
48     * The error text to display when the date in the cell is after maxValue (defaults to
49     * 'The date in this field must be before {maxValue}').
50     */
51    maxText : "The date in this field must be equal to or before {0}",
52    /**
53     * @cfg {String} invalidText
54     * The error text to display when the date in the field is invalid (defaults to
55     * '{value} is not a valid date - it must be in the format {format}').
56     */
57    invalidText : "{0} is not a valid date - it must be in the format {1}",
58    /**
59     * @cfg {String} triggerClass
60     * An additional CSS class used to style the trigger button.  The trigger will always get the
61     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-date-trigger'
62     * which displays a calendar icon).
63     */
64    triggerClass : 'x-form-date-trigger',
65    /**
66     * @cfg {Boolean} showToday
67     * False to hide the footer area of the DatePicker containing the Today button and disable the keyboard
68     * handler for spacebar that selects the current date (defaults to true).
69     */
70    showToday : true,
71    /**
72     * @cfg {Date/String} minValue
73     * The minimum allowed date. Can be either a Javascript date object or a string date in a
74     * valid format (defaults to null).
75     */
76    /**
77     * @cfg {Date/String} maxValue
78     * The maximum allowed date. Can be either a Javascript date object or a string date in a
79     * valid format (defaults to null).
80     */
81    /**
82     * @cfg {Array} disabledDays
83     * An array of days to disable, 0 based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
84     */
85    /**
86     * @cfg {Array} disabledDates
87     * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
88     * expression so they are very powerful. Some examples:
89     * <ul>
90     * <li>["03/08/2003", "09/16/2003"] would disable those exact dates</li>
91     * <li>["03/08", "09/16"] would disable those days for every year</li>
92     * <li>["^03/08"] would only match the beginning (useful if you are using short years)</li>
93     * <li>["03/../2006"] would disable every day in March 2006</li>
94     * <li>["^03"] would disable every day in every March</li>
95     * </ul>
96     * Note that the format of the dates included in the array should exactly match the {@link #format} config.
97     * In order to support regular expressions, if you are using a date format that has "." in it, you will have to
98     * escape the dot when restricting dates. For example: ["03\\.08\\.03"].
99     */
100    /**
101     * @cfg {String/Object} autoCreate
102     * A DomHelper element spec, or true for a default element spec (defaults to
103     * {tag: "input", type: "text", size: "10", autocomplete: "off"})
104     */
105
106    // private
107    defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
108
109    initComponent : function(){
110        Ext.form.DateField.superclass.initComponent.call(this);
111       
112        this.addEvents(
113            /**
114             * @event select
115             * Fires when a date is selected via the date picker.
116             * @param {Ext.form.DateField} this
117             * @param {Date} date The date that was selected
118             */
119            'select'
120        );
121       
122        if(typeof this.minValue == "string"){
123            this.minValue = this.parseDate(this.minValue);
124        }
125        if(typeof this.maxValue == "string"){
126            this.maxValue = this.parseDate(this.maxValue);
127        }
128        this.disabledDatesRE = null;
129        this.initDisabledDays();
130    },
131
132    // private
133    initDisabledDays : function(){
134        if(this.disabledDates){
135            var dd = this.disabledDates;
136            var re = "(?:";
137            for(var i = 0; i < dd.length; i++){
138                re += dd[i];
139                if(i != dd.length-1) re += "|";
140            }
141            this.disabledDatesRE = new RegExp(re + ")");
142        }
143    },
144
145    /**
146     * Replaces any existing disabled dates with new values and refreshes the DatePicker.
147     * @param {Array} disabledDates An array of date strings (see the {@link #disabledDates} config
148     * for details on supported values) used to disable a pattern of dates.
149     */
150    setDisabledDates : function(dd){
151        this.disabledDates = dd;
152        this.initDisabledDays();
153        if(this.menu){
154            this.menu.picker.setDisabledDates(this.disabledDatesRE);
155        }
156    },
157
158    /**
159     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
160     * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
161     * for details on supported values.
162     */
163    setDisabledDays : function(dd){
164        this.disabledDays = dd;
165        if(this.menu){
166            this.menu.picker.setDisabledDays(dd);
167        }
168    },
169
170    /**
171     * Replaces any existing {@link #minValue} with the new value and refreshes the DatePicker.
172     * @param {Date} value The minimum date that can be selected
173     */
174    setMinValue : function(dt){
175        this.minValue = (typeof dt == "string" ? this.parseDate(dt) : dt);
176        if(this.menu){
177            this.menu.picker.setMinDate(this.minValue);
178        }
179    },
180
181    /**
182     * Replaces any existing {@link #maxValue} with the new value and refreshes the DatePicker.
183     * @param {Date} value The maximum date that can be selected
184     */
185    setMaxValue : function(dt){
186        this.maxValue = (typeof dt == "string" ? this.parseDate(dt) : dt);
187        if(this.menu){
188            this.menu.picker.setMaxDate(this.maxValue);
189        }
190    },
191
192    // private
193    validateValue : function(value){
194        value = this.formatDate(value);
195        if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
196            return false;
197        }
198        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
199             return true;
200        }
201        var svalue = value;
202        value = this.parseDate(value);
203        if(!value){
204            this.markInvalid(String.format(this.invalidText, svalue, this.format));
205            return false;
206        }
207        var time = value.getTime();
208        if(this.minValue && time < this.minValue.getTime()){
209            this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
210            return false;
211        }
212        if(this.maxValue && time > this.maxValue.getTime()){
213            this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
214            return false;
215        }
216        if(this.disabledDays){
217            var day = value.getDay();
218            for(var i = 0; i < this.disabledDays.length; i++) {
219                if(day === this.disabledDays[i]){
220                    this.markInvalid(this.disabledDaysText);
221                    return false;
222                }
223            }
224        }
225        var fvalue = this.formatDate(value);
226        if(this.disabledDatesRE && this.disabledDatesRE.test(fvalue)){
227            this.markInvalid(String.format(this.disabledDatesText, fvalue));
228            return false;
229        }
230        return true;
231    },
232
233    // private
234    // Provides logic to override the default TriggerField.validateBlur which just returns true
235    validateBlur : function(){
236        return !this.menu || !this.menu.isVisible();
237    },
238
239    /**
240     * Returns the current date value of the date field.
241     * @return {Date} The date value
242     */
243    getValue : function(){
244        return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || "";
245    },
246
247    /**
248     * Sets the value of the date field.  You can pass a date object or any string that can be parsed into a valid
249     * date, using DateField.format as the date format, according to the same rules as {@link Date#parseDate}
250     * (the default format used is "m/d/Y").
251     * <br />Usage:
252     * <pre><code>
253//All of these calls set the same date value (May 4, 2006)
254
255//Pass a date object:
256var dt = new Date('5/4/2006');
257dateField.setValue(dt);
258
259//Pass a date string (default format):
260dateField.setValue('05/04/2006');
261
262//Pass a date string (custom format):
263dateField.format = 'Y-m-d';
264dateField.setValue('2006-05-04');
265</code></pre>
266     * @param {String/Date} date The date or valid date string
267     */
268    setValue : function(date){
269        Ext.form.DateField.superclass.setValue.call(this, this.formatDate(this.parseDate(date)));
270    },
271
272    // private
273    parseDate : function(value){
274        if(!value || Ext.isDate(value)){
275            return value;
276        }
277        var v = Date.parseDate(value, this.format);
278        if(!v && this.altFormats){
279            if(!this.altFormatsArray){
280                this.altFormatsArray = this.altFormats.split("|");
281            }
282            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
283                v = Date.parseDate(value, this.altFormatsArray[i]);
284            }
285        }
286        return v;
287    },
288
289    // private
290    onDestroy : function(){
291        if(this.menu) {
292            this.menu.destroy();
293        }
294        if(this.wrap){
295            this.wrap.remove();
296        }
297        Ext.form.DateField.superclass.onDestroy.call(this);
298    },
299
300    // private
301    formatDate : function(date){
302        return Ext.isDate(date) ? date.dateFormat(this.format) : date;
303    },
304
305    // private
306    menuListeners : {
307        select: function(m, d){
308            this.setValue(d);
309            this.fireEvent('select', this, d);
310        },
311        show : function(){ // retain focus styling
312            this.onFocus();
313        },
314        hide : function(){
315            this.focus.defer(10, this);
316            var ml = this.menuListeners;
317            this.menu.un("select", ml.select,  this);
318            this.menu.un("show", ml.show,  this);
319            this.menu.un("hide", ml.hide,  this);
320        }
321    },
322
323    /**
324     * @method onTriggerClick
325     * @hide
326     */
327    // private
328    // Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
329    onTriggerClick : function(){
330        if(this.disabled){
331            return;
332        }
333        if(this.menu == null){
334            this.menu = new Ext.menu.DateMenu();
335        }
336        Ext.apply(this.menu.picker,  {
337            minDate : this.minValue,
338            maxDate : this.maxValue,
339            disabledDatesRE : this.disabledDatesRE,
340            disabledDatesText : this.disabledDatesText,
341            disabledDays : this.disabledDays,
342            disabledDaysText : this.disabledDaysText,
343            format : this.format,
344            showToday : this.showToday,
345            minText : String.format(this.minText, this.formatDate(this.minValue)),
346            maxText : String.format(this.maxText, this.formatDate(this.maxValue))
347        });
348        this.menu.on(Ext.apply({}, this.menuListeners, {
349            scope:this
350        }));
351        this.menu.picker.setValue(this.getValue() || new Date());
352        this.menu.show(this.el, "tl-bl?");
353    },
354
355    // private
356    beforeBlur : function(){
357        var v = this.parseDate(this.getRawValue());
358        if(v){
359            this.setValue(v);
360        }
361    }
362
363    /**
364     * @cfg {Boolean} grow @hide
365     */
366    /**
367     * @cfg {Number} growMin @hide
368     */
369    /**
370     * @cfg {Number} growMax @hide
371     */
372    /**
373     * @hide
374     * @method autoSize
375     */
376});
377Ext.reg('datefield', Ext.form.DateField);
Note: See TracBrowser for help on using the repository browser.