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 | */ |
---|
17 | Ext.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: |
---|
256 | var dt = new Date('5/4/2006'); |
---|
257 | dateField.setValue(dt); |
---|
258 | |
---|
259 | //Pass a date string (default format): |
---|
260 | dateField.setValue('05/04/2006'); |
---|
261 | |
---|
262 | //Pass a date string (custom format): |
---|
263 | dateField.format = 'Y-m-d'; |
---|
264 | dateField.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 | }); |
---|
377 | Ext.reg('datefield', Ext.form.DateField); |
---|