4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-form-field-Date'>/**
19 </span> * @class Ext.form.field.Date
20 * @extends Ext.form.field.Picker
22 Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
25 This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
26 it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
27 configs. These may be reconfigured to use date formats appropriate for the user's locale.
29 The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
30 {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
31 in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
32 {@img Ext.form.Date/Ext.form.Date.png Ext.form.Date component}
35 Ext.create('Ext.form.Panel', {
44 maxValue: new Date() // limited to the current date or prior
50 value: new Date() // defaults to today
52 renderTo: Ext.getBody()
55 #Date Formats Examples#
57 This example shows a couple of different date format parsing scenarios. Both use custom date format
58 configurations; the first one matches the configured `format` while the second matches the `altFormats`.
60 Ext.create('Ext.form.Panel', {
61 renderTo: Ext.getBody(),
70 // The value matches the format; will be parsed and displayed using that format.
78 // The value does not match the format, but does match an altFormat; will be parsed
79 // using the altFormat and displayed using the format.
81 altFormats: 'm,d,Y|m.d.Y',
88 * @docauthor Jason Johnston <jason@sencha.com>
90 Ext.define('Ext.form.field.Date', {
91 extend:'Ext.form.field.Picker',
92 alias: 'widget.datefield',
93 requires: ['Ext.picker.Date'],
94 alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],
96 <span id='Ext-form-field-Date-cfg-format'> /**
97 </span> * @cfg {String} format
98 * The default date format string which can be overriden for localization support. The format must be
99 * valid according to {@link Ext.Date#parse} (defaults to <tt>'m/d/Y'</tt>).
101 format : "m/d/Y",
102 <span id='Ext-form-field-Date-cfg-altFormats'> /**
103 </span> * @cfg {String} altFormats
104 * Multiple date formats separated by "<tt>|</tt>" to try when parsing a user input value and it
105 * does not match the defined format (defaults to
106 * <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>).
108 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",
109 <span id='Ext-form-field-Date-cfg-disabledDaysText'> /**
110 </span> * @cfg {String} disabledDaysText
111 * The tooltip to display when the date falls on a disabled day (defaults to <tt>'Disabled'</tt>)
113 disabledDaysText : "Disabled",
114 <span id='Ext-form-field-Date-cfg-disabledDatesText'> /**
115 </span> * @cfg {String} disabledDatesText
116 * The tooltip text to display when the date falls on a disabled date (defaults to <tt>'Disabled'</tt>)
118 disabledDatesText : "Disabled",
119 <span id='Ext-form-field-Date-cfg-minText'> /**
120 </span> * @cfg {String} minText
121 * The error text to display when the date in the cell is before <tt>{@link #minValue}</tt> (defaults to
122 * <tt>'The date in this field must be after {minValue}'</tt>).
124 minText : "The date in this field must be equal to or after {0}",
125 <span id='Ext-form-field-Date-cfg-maxText'> /**
126 </span> * @cfg {String} maxText
127 * The error text to display when the date in the cell is after <tt>{@link #maxValue}</tt> (defaults to
128 * <tt>'The date in this field must be before {maxValue}'</tt>).
130 maxText : "The date in this field must be equal to or before {0}",
131 <span id='Ext-form-field-Date-cfg-invalidText'> /**
132 </span> * @cfg {String} invalidText
133 * The error text to display when the date in the field is invalid (defaults to
134 * <tt>'{value} is not a valid date - it must be in the format {format}'</tt>).
136 invalidText : "{0} is not a valid date - it must be in the format {1}",
137 <span id='Ext-form-field-Date-cfg-triggerCls'> /**
138 </span> * @cfg {String} triggerCls
139 * An additional CSS class used to style the trigger button. The trigger will always get the
140 * class <tt>'x-form-trigger'</tt> and <tt>triggerCls</tt> will be <b>appended</b> if specified
141 * (defaults to <tt>'x-form-date-trigger'</tt> which displays a calendar icon).
143 triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
144 <span id='Ext-form-field-Date-cfg-showToday'> /**
145 </span> * @cfg {Boolean} showToday
146 * <tt>false</tt> to hide the footer area of the Date picker containing the Today button and disable
147 * the keyboard handler for spacebar that selects the current date (defaults to <tt>true</tt>).
150 <span id='Ext-form-field-Date-cfg-minValue'> /**
151 </span> * @cfg {Date/String} minValue
152 * The minimum allowed date. Can be either a Javascript date object or a string date in a
153 * valid format (defaults to undefined).
155 <span id='Ext-form-field-Date-cfg-maxValue'> /**
156 </span> * @cfg {Date/String} maxValue
157 * The maximum allowed date. Can be either a Javascript date object or a string date in a
158 * valid format (defaults to undefined).
160 <span id='Ext-form-field-Date-cfg-disabledDays'> /**
161 </span> * @cfg {Array} disabledDays
162 * An array of days to disable, 0 based (defaults to undefined). Some examples:<pre><code>
163 // disable Sunday and Saturday:
166 disabledDays: [1,2,3,4,5]
167 * </code></pre>
169 <span id='Ext-form-field-Date-cfg-disabledDates'> /**
170 </span> * @cfg {Array} disabledDates
171 * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular
172 * expression so they are very powerful. Some examples:<pre><code>
173 // disable these exact dates:
174 disabledDates: ["03/08/2003", "09/16/2003"]
175 // disable these days for every year:
176 disabledDates: ["03/08", "09/16"]
177 // only match the beginning (useful if you are using short years):
178 disabledDates: ["^03/08"]
179 // disable every day in March 2006:
180 disabledDates: ["03/../2006"]
181 // disable every day in every March:
182 disabledDates: ["^03"]
183 * </code></pre>
184 * Note that the format of the dates included in the array should exactly match the {@link #format} config.
185 * In order to support regular expressions, if you are using a {@link #format date format} that has "." in
186 * it, you will have to escape the dot when restricting dates. For example: <tt>["03\\.08\\.03"]</tt>.
189 <span id='Ext-form-field-Date-cfg-submitFormat'> /**
190 </span> * @cfg {String} submitFormat The date format string which will be submitted to the server.
191 * The format must be valid according to {@link Ext.Date#parse} (defaults to <tt>{@link #format}</tt>).
194 // in the absence of a time value, a default value of 12 noon will be used
195 // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
196 initTime: '12', // 24 hour format
200 matchFieldWidth: false,
201 <span id='Ext-form-field-Date-cfg-startDay'> /**
202 </span> * @cfg {Number} startDay
203 * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
207 initComponent : function(){
209 isString = Ext.isString,
215 me.minValue = me.parseDate(min);
218 me.maxValue = me.parseDate(max);
220 me.disabledDatesRE = null;
221 me.initDisabledDays();
226 initValue: function() {
230 // If a String value was supplied, try to convert it to a proper Date
231 if (Ext.isString(value)) {
232 me.value = me.rawToValue(value);
239 initDisabledDays : function(){
240 if(this.disabledDates){
241 var dd = this.disabledDates,
243 re = "(?:";
245 Ext.each(dd, function(d, i){
246 re += Ext.isDate(d) ? '^' + Ext.String.escapeRegex(d.dateFormat(this.format)) + '$' : dd[i];
251 this.disabledDatesRE = new RegExp(re + ')');
255 <span id='Ext-form-field-Date-method-setDisabledDates'> /**
256 </span> * Replaces any existing disabled dates with new values and refreshes the Date picker.
257 * @param {Array} disabledDates An array of date strings (see the <tt>{@link #disabledDates}</tt> config
258 * for details on supported values) used to disable a pattern of dates.
260 setDisabledDates : function(dd){
264 me.disabledDates = dd;
265 me.initDisabledDays();
267 picker.setDisabledDates(me.disabledDatesRE);
271 <span id='Ext-form-field-Date-method-setDisabledDays'> /**
272 </span> * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
273 * @param {Array} disabledDays An array of disabled day indexes. See the <tt>{@link #disabledDays}</tt>
274 * config for details on supported values.
276 setDisabledDays : function(dd){
277 var picker = this.picker;
279 this.disabledDays = dd;
281 picker.setDisabledDays(dd);
285 <span id='Ext-form-field-Date-method-setMinValue'> /**
286 </span> * Replaces any existing <tt>{@link #minValue}</tt> with the new value and refreshes the Date picker.
287 * @param {Date} value The minimum date that can be selected
289 setMinValue : function(dt){
292 minValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
294 me.minValue = minValue;
296 picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
297 picker.setMinDate(minValue);
301 <span id='Ext-form-field-Date-method-setMaxValue'> /**
302 </span> * Replaces any existing <tt>{@link #maxValue}</tt> with the new value and refreshes the Date picker.
303 * @param {Date} value The maximum date that can be selected
305 setMaxValue : function(dt){
308 maxValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
310 me.maxValue = maxValue;
312 picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
313 picker.setMaxDate(maxValue);
317 <span id='Ext-form-field-Date-method-getErrors'> /**
318 </span> * Runs all of Date's validations and returns an array of any errors. Note that this first
319 * runs Text's validations, so the returned array is an amalgamation of all field errors.
320 * The additional validation checks are testing that the date format is valid, that the chosen
321 * date is within the min and max date constraints set, that the date chosen is not in the disabledDates
322 * regex and that the day chosed is not one of the disabledDays.
323 * @param {Mixed} value The value to get errors for (defaults to the current field value)
324 * @return {Array} All validation errors for this field
326 getErrors: function(value) {
328 format = Ext.String.format,
329 clearTime = Ext.Date.clearTime,
330 errors = me.callParent(arguments),
331 disabledDays = me.disabledDays,
332 disabledDatesRE = me.disabledDatesRE,
333 minValue = me.minValue,
334 maxValue = me.maxValue,
335 len = disabledDays ? disabledDays.length : 0,
342 value = me.formatDate(value || me.processRawValue(me.getRawValue()));
344 if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
349 value = me.parseDate(value);
351 errors.push(format(me.invalidText, svalue, me.format));
355 time = value.getTime();
356 if (minValue && time < clearTime(minValue).getTime()) {
357 errors.push(format(me.minText, me.formatDate(minValue)));
360 if (maxValue && time > clearTime(maxValue).getTime()) {
361 errors.push(format(me.maxText, me.formatDate(maxValue)));
365 day = value.getDay();
367 for(; i < len; i++) {
368 if (day === disabledDays[i]) {
369 errors.push(me.disabledDaysText);
375 fvalue = me.formatDate(value);
376 if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
377 errors.push(format(me.disabledDatesText, fvalue));
383 rawToValue: function(rawValue) {
384 return this.parseDate(rawValue) || rawValue || null;
387 valueToRaw: function(value) {
388 return this.formatDate(this.parseDate(value));
391 <span id='Ext-form-field-Date-method-setValue'> /**
392 </span> * Sets the value of the date field. You can pass a date object or any string that can be
393 * parsed into a valid date, using <tt>{@link #format}</tt> as the date format, according
394 * to the same rules as {@link Ext.Date#parse} (the default format used is <tt>"m/d/Y"</tt>).
396 * <pre><code>
397 //All of these calls set the same date value (May 4, 2006)
399 //Pass a date object:
400 var dt = new Date('5/4/2006');
401 dateField.setValue(dt);
403 //Pass a date string (default format):
404 dateField.setValue('05/04/2006');
406 //Pass a date string (custom format):
407 dateField.format = 'Y-m-d';
408 dateField.setValue('2006-05-04');
409 </code></pre>
410 * @param {String/Date} date The date or valid date string
411 * @return {Ext.form.field.Date} this
415 <span id='Ext-form-field-Date-method-safeParse'> /**
416 </span> * Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
417 * @param {String} value The value to attempt to parse
418 * @param {String} format A valid date format (see {@link Ext.Date#parse})
419 * @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
421 safeParse : function(value, format) {
427 if (utilDate.formatContainsHourInfo(format)) {
428 // if parse format contains hour information, no DST adjustment is necessary
429 result = utilDate.parse(value, format);
431 // set time to 12 noon, then clear the time
432 parsedDate = utilDate.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat);
434 result = utilDate.clearTime(parsedDate);
441 getSubmitValue: function() {
443 format = me.submitFormat || me.format,
444 value = me.getValue();
446 return value ? Ext.Date.format(value, format) : null;
449 <span id='Ext-form-field-Date-method-parseDate'> /**
452 parseDate : function(value) {
453 if(!value || Ext.isDate(value)){
458 val = me.safeParse(value, me.format),
459 altFormats = me.altFormats,
460 altFormatsArray = me.altFormatsArray,
464 if (!val && altFormats) {
465 altFormatsArray = altFormatsArray || altFormats.split('|');
466 len = altFormatsArray.length;
467 for (; i < len && !val; ++i) {
468 val = me.safeParse(value, altFormatsArray[i]);
475 formatDate : function(date){
476 return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
479 createPicker: function() {
481 format = Ext.String.format;
483 return Ext.create('Ext.picker.Date', {
485 renderTo: document.body,
489 minDate: me.minValue,
490 maxDate: me.maxValue,
491 disabledDatesRE: me.disabledDatesRE,
492 disabledDatesText: me.disabledDatesText,
493 disabledDays: me.disabledDays,
494 disabledDaysText: me.disabledDaysText,
496 showToday: me.showToday,
497 startDay: me.startDay,
498 minText: format(me.minText, me.formatDate(me.minValue)),
499 maxText: format(me.maxText, me.formatDate(me.maxValue)),
512 onSelect: function(m, d) {
516 me.fireEvent('select', me, d);
520 <span id='Ext-form-field-Date-method-onExpand'> /**
522 * Sets the Date picker's value to match the current field value when expanding.
524 onExpand: function() {
526 value = me.getValue();
527 me.picker.setValue(Ext.isDate(value) ? value : new Date());
530 <span id='Ext-form-field-Date-method-onCollapse'> /**
532 * Focuses the field when collapsing the Date picker.
534 onCollapse: function() {
535 this.focus(false, 60);
539 beforeBlur : function(){
541 v = me.parseDate(me.getRawValue()),
542 focusTask = me.focusTask;
553 <span id='Ext-form-field-Date-cfg-grow'> /**
554 </span> * @cfg {Boolean} grow @hide
556 <span id='Ext-form-field-Date-cfg-growMin'> /**
557 </span> * @cfg {Number} growMin @hide
559 <span id='Ext-form-field-Date-cfg-growMax'> /**
560 </span> * @cfg {Number} growMax @hide
562 <span id='Ext-form-field-Date-method-autoSize'> /**