← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/docs/source/DateField.html

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

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