1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.com/license |
---|
6 | */ |
---|
7 | /** |
---|
8 | * @class Ext.DatePicker |
---|
9 | * @extends Ext.Component |
---|
10 | * Simple date picker class. |
---|
11 | * @constructor |
---|
12 | * Create a new DatePicker |
---|
13 | * @param {Object} config The config object |
---|
14 | * @xtype datepicker |
---|
15 | */ |
---|
16 | Ext.DatePicker = Ext.extend(Ext.BoxComponent, { |
---|
17 | /** |
---|
18 | * @cfg {String} todayText |
---|
19 | * The text to display on the button that selects the current date (defaults to <tt>'Today'</tt>) |
---|
20 | */ |
---|
21 | todayText : 'Today', |
---|
22 | /** |
---|
23 | * @cfg {String} okText |
---|
24 | * The text to display on the ok button (defaults to <tt>' OK '</tt> to give the user extra clicking room) |
---|
25 | */ |
---|
26 | okText : ' OK ', |
---|
27 | /** |
---|
28 | * @cfg {String} cancelText |
---|
29 | * The text to display on the cancel button (defaults to <tt>'Cancel'</tt>) |
---|
30 | */ |
---|
31 | cancelText : 'Cancel', |
---|
32 | /** |
---|
33 | * @cfg {String} todayTip |
---|
34 | * The tooltip to display for the button that selects the current date (defaults to <tt>'{current date} (Spacebar)'</tt>) |
---|
35 | */ |
---|
36 | todayTip : '{0} (Spacebar)', |
---|
37 | /** |
---|
38 | * @cfg {String} minText |
---|
39 | * The error text to display if the minDate validation fails (defaults to <tt>'This date is before the minimum date'</tt>) |
---|
40 | */ |
---|
41 | minText : 'This date is before the minimum date', |
---|
42 | /** |
---|
43 | * @cfg {String} maxText |
---|
44 | * The error text to display if the maxDate validation fails (defaults to <tt>'This date is after the maximum date'</tt>) |
---|
45 | */ |
---|
46 | maxText : 'This date is after the maximum date', |
---|
47 | /** |
---|
48 | * @cfg {String} format |
---|
49 | * The default date format string which can be overriden for localization support. The format must be |
---|
50 | * valid according to {@link Date#parseDate} (defaults to <tt>'m/d/y'</tt>). |
---|
51 | */ |
---|
52 | format : 'm/d/y', |
---|
53 | /** |
---|
54 | * @cfg {String} disabledDaysText |
---|
55 | * The tooltip to display when the date falls on a disabled day (defaults to <tt>'Disabled'</tt>) |
---|
56 | */ |
---|
57 | disabledDaysText : 'Disabled', |
---|
58 | /** |
---|
59 | * @cfg {String} disabledDatesText |
---|
60 | * The tooltip text to display when the date falls on a disabled date (defaults to <tt>'Disabled'</tt>) |
---|
61 | */ |
---|
62 | disabledDatesText : 'Disabled', |
---|
63 | /** |
---|
64 | * @cfg {Array} monthNames |
---|
65 | * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames) |
---|
66 | */ |
---|
67 | monthNames : Date.monthNames, |
---|
68 | /** |
---|
69 | * @cfg {Array} dayNames |
---|
70 | * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames) |
---|
71 | */ |
---|
72 | dayNames : Date.dayNames, |
---|
73 | /** |
---|
74 | * @cfg {String} nextText |
---|
75 | * The next month navigation button tooltip (defaults to <tt>'Next Month (Control+Right)'</tt>) |
---|
76 | */ |
---|
77 | nextText : 'Next Month (Control+Right)', |
---|
78 | /** |
---|
79 | * @cfg {String} prevText |
---|
80 | * The previous month navigation button tooltip (defaults to <tt>'Previous Month (Control+Left)'</tt>) |
---|
81 | */ |
---|
82 | prevText : 'Previous Month (Control+Left)', |
---|
83 | /** |
---|
84 | * @cfg {String} monthYearText |
---|
85 | * The header month selector tooltip (defaults to <tt>'Choose a month (Control+Up/Down to move years)'</tt>) |
---|
86 | */ |
---|
87 | monthYearText : 'Choose a month (Control+Up/Down to move years)', |
---|
88 | /** |
---|
89 | * @cfg {Number} startDay |
---|
90 | * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday) |
---|
91 | */ |
---|
92 | startDay : 0, |
---|
93 | /** |
---|
94 | * @cfg {Boolean} showToday |
---|
95 | * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar |
---|
96 | * that selects the current date (defaults to <tt>true</tt>). |
---|
97 | */ |
---|
98 | showToday : true, |
---|
99 | /** |
---|
100 | * @cfg {Date} minDate |
---|
101 | * Minimum allowable date (JavaScript date object, defaults to null) |
---|
102 | */ |
---|
103 | /** |
---|
104 | * @cfg {Date} maxDate |
---|
105 | * Maximum allowable date (JavaScript date object, defaults to null) |
---|
106 | */ |
---|
107 | /** |
---|
108 | * @cfg {Array} disabledDays |
---|
109 | * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null). |
---|
110 | */ |
---|
111 | /** |
---|
112 | * @cfg {RegExp} disabledDatesRE |
---|
113 | * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates} |
---|
114 | * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the |
---|
115 | * disabledDates value. |
---|
116 | */ |
---|
117 | /** |
---|
118 | * @cfg {Array} disabledDates |
---|
119 | * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular |
---|
120 | * expression so they are very powerful. Some examples: |
---|
121 | * <ul> |
---|
122 | * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li> |
---|
123 | * <li>['03/08', '09/16'] would disable those days for every year</li> |
---|
124 | * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li> |
---|
125 | * <li>['03/../2006'] would disable every day in March 2006</li> |
---|
126 | * <li>['^03'] would disable every day in every March</li> |
---|
127 | * </ul> |
---|
128 | * Note that the format of the dates included in the array should exactly match the {@link #format} config. |
---|
129 | * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to |
---|
130 | * escape the dot when restricting dates. For example: ['03\\.08\\.03']. |
---|
131 | */ |
---|
132 | |
---|
133 | // private |
---|
134 | initComponent : function(){ |
---|
135 | Ext.DatePicker.superclass.initComponent.call(this); |
---|
136 | |
---|
137 | this.value = this.value ? |
---|
138 | this.value.clearTime() : new Date().clearTime(); |
---|
139 | |
---|
140 | this.addEvents( |
---|
141 | /** |
---|
142 | * @event select |
---|
143 | * Fires when a date is selected |
---|
144 | * @param {DatePicker} this |
---|
145 | * @param {Date} date The selected date |
---|
146 | */ |
---|
147 | 'select' |
---|
148 | ); |
---|
149 | |
---|
150 | if(this.handler){ |
---|
151 | this.on('select', this.handler, this.scope || this); |
---|
152 | } |
---|
153 | |
---|
154 | this.initDisabledDays(); |
---|
155 | }, |
---|
156 | |
---|
157 | // private |
---|
158 | initDisabledDays : function(){ |
---|
159 | if(!this.disabledDatesRE && this.disabledDates){ |
---|
160 | var dd = this.disabledDates, |
---|
161 | len = dd.length - 1, |
---|
162 | re = '(?:'; |
---|
163 | |
---|
164 | Ext.each(dd, function(d, i){ |
---|
165 | re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i]; |
---|
166 | if(i != len){ |
---|
167 | re += '|'; |
---|
168 | } |
---|
169 | }, this); |
---|
170 | this.disabledDatesRE = new RegExp(re + ')'); |
---|
171 | } |
---|
172 | }, |
---|
173 | |
---|
174 | /** |
---|
175 | * Replaces any existing disabled dates with new values and refreshes the DatePicker. |
---|
176 | * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config |
---|
177 | * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates. |
---|
178 | */ |
---|
179 | setDisabledDates : function(dd){ |
---|
180 | if(Ext.isArray(dd)){ |
---|
181 | this.disabledDates = dd; |
---|
182 | this.disabledDatesRE = null; |
---|
183 | }else{ |
---|
184 | this.disabledDatesRE = dd; |
---|
185 | } |
---|
186 | this.initDisabledDays(); |
---|
187 | this.update(this.value, true); |
---|
188 | }, |
---|
189 | |
---|
190 | /** |
---|
191 | * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker. |
---|
192 | * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config |
---|
193 | * for details on supported values. |
---|
194 | */ |
---|
195 | setDisabledDays : function(dd){ |
---|
196 | this.disabledDays = dd; |
---|
197 | this.update(this.value, true); |
---|
198 | }, |
---|
199 | |
---|
200 | /** |
---|
201 | * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker. |
---|
202 | * @param {Date} value The minimum date that can be selected |
---|
203 | */ |
---|
204 | setMinDate : function(dt){ |
---|
205 | this.minDate = dt; |
---|
206 | this.update(this.value, true); |
---|
207 | }, |
---|
208 | |
---|
209 | /** |
---|
210 | * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker. |
---|
211 | * @param {Date} value The maximum date that can be selected |
---|
212 | */ |
---|
213 | setMaxDate : function(dt){ |
---|
214 | this.maxDate = dt; |
---|
215 | this.update(this.value, true); |
---|
216 | }, |
---|
217 | |
---|
218 | /** |
---|
219 | * Sets the value of the date field |
---|
220 | * @param {Date} value The date to set |
---|
221 | */ |
---|
222 | setValue : function(value){ |
---|
223 | var old = this.value; |
---|
224 | this.value = value.clearTime(true); |
---|
225 | if(this.el){ |
---|
226 | this.update(this.value); |
---|
227 | } |
---|
228 | }, |
---|
229 | |
---|
230 | /** |
---|
231 | * Gets the current selected value of the date field |
---|
232 | * @return {Date} The selected date |
---|
233 | */ |
---|
234 | getValue : function(){ |
---|
235 | return this.value; |
---|
236 | }, |
---|
237 | |
---|
238 | // private |
---|
239 | focus : function(){ |
---|
240 | if(this.el){ |
---|
241 | this.update(this.activeDate); |
---|
242 | } |
---|
243 | }, |
---|
244 | |
---|
245 | // private |
---|
246 | onEnable: function(initial){ |
---|
247 | Ext.DatePicker.superclass.onEnable.call(this); |
---|
248 | this.doDisabled(false); |
---|
249 | this.update(initial ? this.value : this.activeDate); |
---|
250 | if(Ext.isIE){ |
---|
251 | this.el.repaint(); |
---|
252 | } |
---|
253 | |
---|
254 | }, |
---|
255 | |
---|
256 | // private |
---|
257 | onDisable: function(){ |
---|
258 | Ext.DatePicker.superclass.onDisable.call(this); |
---|
259 | this.doDisabled(true); |
---|
260 | if(Ext.isIE && !Ext.isIE8){ |
---|
261 | /* Really strange problem in IE6/7, when disabled, have to explicitly |
---|
262 | * repaint each of the nodes to get them to display correctly, simply |
---|
263 | * calling repaint on the main element doesn't appear to be enough. |
---|
264 | */ |
---|
265 | Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){ |
---|
266 | Ext.fly(el).repaint(); |
---|
267 | }); |
---|
268 | } |
---|
269 | }, |
---|
270 | |
---|
271 | // private |
---|
272 | doDisabled: function(disabled){ |
---|
273 | this.keyNav.setDisabled(disabled); |
---|
274 | this.prevRepeater.setDisabled(disabled); |
---|
275 | this.nextRepeater.setDisabled(disabled); |
---|
276 | if(this.showToday){ |
---|
277 | this.todayKeyListener.setDisabled(disabled); |
---|
278 | this.todayBtn.setDisabled(disabled); |
---|
279 | } |
---|
280 | }, |
---|
281 | |
---|
282 | // private |
---|
283 | onRender : function(container, position){ |
---|
284 | var m = [ |
---|
285 | '<table cellspacing="0">', |
---|
286 | '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'"> </a></td></tr>', |
---|
287 | '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'], |
---|
288 | dn = this.dayNames, |
---|
289 | i; |
---|
290 | for(i = 0; i < 7; i++){ |
---|
291 | var d = this.startDay+i; |
---|
292 | if(d > 6){ |
---|
293 | d = d-7; |
---|
294 | } |
---|
295 | m.push('<th><span>', dn[d].substr(0,1), '</span></th>'); |
---|
296 | } |
---|
297 | m[m.length] = '</tr></thead><tbody><tr>'; |
---|
298 | for(i = 0; i < 42; i++) { |
---|
299 | if(i % 7 === 0 && i !== 0){ |
---|
300 | m[m.length] = '</tr><tr>'; |
---|
301 | } |
---|
302 | m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>'; |
---|
303 | } |
---|
304 | m.push('</tr></tbody></table></td></tr>', |
---|
305 | this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '', |
---|
306 | '</table><div class="x-date-mp"></div>'); |
---|
307 | |
---|
308 | var el = document.createElement('div'); |
---|
309 | el.className = 'x-date-picker'; |
---|
310 | el.innerHTML = m.join(''); |
---|
311 | |
---|
312 | container.dom.insertBefore(el, position); |
---|
313 | |
---|
314 | this.el = Ext.get(el); |
---|
315 | this.eventEl = Ext.get(el.firstChild); |
---|
316 | |
---|
317 | this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), { |
---|
318 | handler: this.showPrevMonth, |
---|
319 | scope: this, |
---|
320 | preventDefault:true, |
---|
321 | stopDefault:true |
---|
322 | }); |
---|
323 | |
---|
324 | this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), { |
---|
325 | handler: this.showNextMonth, |
---|
326 | scope: this, |
---|
327 | preventDefault:true, |
---|
328 | stopDefault:true |
---|
329 | }); |
---|
330 | |
---|
331 | this.monthPicker = this.el.down('div.x-date-mp'); |
---|
332 | this.monthPicker.enableDisplayMode('block'); |
---|
333 | |
---|
334 | this.keyNav = new Ext.KeyNav(this.eventEl, { |
---|
335 | 'left' : function(e){ |
---|
336 | if(e.ctrlKey){ |
---|
337 | this.showPrevMonth(); |
---|
338 | }else{ |
---|
339 | this.update(this.activeDate.add('d', -1)); |
---|
340 | } |
---|
341 | }, |
---|
342 | |
---|
343 | 'right' : function(e){ |
---|
344 | if(e.ctrlKey){ |
---|
345 | this.showNextMonth(); |
---|
346 | }else{ |
---|
347 | this.update(this.activeDate.add('d', 1)); |
---|
348 | } |
---|
349 | }, |
---|
350 | |
---|
351 | 'up' : function(e){ |
---|
352 | if(e.ctrlKey){ |
---|
353 | this.showNextYear(); |
---|
354 | }else{ |
---|
355 | this.update(this.activeDate.add('d', -7)); |
---|
356 | } |
---|
357 | }, |
---|
358 | |
---|
359 | 'down' : function(e){ |
---|
360 | if(e.ctrlKey){ |
---|
361 | this.showPrevYear(); |
---|
362 | }else{ |
---|
363 | this.update(this.activeDate.add('d', 7)); |
---|
364 | } |
---|
365 | }, |
---|
366 | |
---|
367 | 'pageUp' : function(e){ |
---|
368 | this.showNextMonth(); |
---|
369 | }, |
---|
370 | |
---|
371 | 'pageDown' : function(e){ |
---|
372 | this.showPrevMonth(); |
---|
373 | }, |
---|
374 | |
---|
375 | 'enter' : function(e){ |
---|
376 | e.stopPropagation(); |
---|
377 | return true; |
---|
378 | }, |
---|
379 | |
---|
380 | scope : this |
---|
381 | }); |
---|
382 | |
---|
383 | this.el.unselectable(); |
---|
384 | |
---|
385 | this.cells = this.el.select('table.x-date-inner tbody td'); |
---|
386 | this.textNodes = this.el.query('table.x-date-inner tbody span'); |
---|
387 | |
---|
388 | this.mbtn = new Ext.Button({ |
---|
389 | text: ' ', |
---|
390 | tooltip: this.monthYearText, |
---|
391 | renderTo: this.el.child('td.x-date-middle', true) |
---|
392 | }); |
---|
393 | this.mbtn.el.child('em').addClass('x-btn-arrow'); |
---|
394 | |
---|
395 | if(this.showToday){ |
---|
396 | this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this); |
---|
397 | var today = (new Date()).dateFormat(this.format); |
---|
398 | this.todayBtn = new Ext.Button({ |
---|
399 | renderTo: this.el.child('td.x-date-bottom', true), |
---|
400 | text: String.format(this.todayText, today), |
---|
401 | tooltip: String.format(this.todayTip, today), |
---|
402 | handler: this.selectToday, |
---|
403 | scope: this |
---|
404 | }); |
---|
405 | } |
---|
406 | this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this); |
---|
407 | this.mon(this.eventEl, 'click', this.handleDateClick, this, {delegate: 'a.x-date-date'}); |
---|
408 | this.mon(this.mbtn, 'click', this.showMonthPicker, this); |
---|
409 | this.onEnable(true); |
---|
410 | }, |
---|
411 | |
---|
412 | // private |
---|
413 | createMonthPicker : function(){ |
---|
414 | if(!this.monthPicker.dom.firstChild){ |
---|
415 | var buf = ['<table border="0" cellspacing="0">']; |
---|
416 | for(var i = 0; i < 6; i++){ |
---|
417 | buf.push( |
---|
418 | '<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>', |
---|
419 | '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>', |
---|
420 | i === 0 ? |
---|
421 | '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' : |
---|
422 | '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>' |
---|
423 | ); |
---|
424 | } |
---|
425 | buf.push( |
---|
426 | '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">', |
---|
427 | this.okText, |
---|
428 | '</button><button type="button" class="x-date-mp-cancel">', |
---|
429 | this.cancelText, |
---|
430 | '</button></td></tr>', |
---|
431 | '</table>' |
---|
432 | ); |
---|
433 | this.monthPicker.update(buf.join('')); |
---|
434 | |
---|
435 | this.mon(this.monthPicker, 'click', this.onMonthClick, this); |
---|
436 | this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this); |
---|
437 | |
---|
438 | this.mpMonths = this.monthPicker.select('td.x-date-mp-month'); |
---|
439 | this.mpYears = this.monthPicker.select('td.x-date-mp-year'); |
---|
440 | |
---|
441 | this.mpMonths.each(function(m, a, i){ |
---|
442 | i += 1; |
---|
443 | if((i%2) === 0){ |
---|
444 | m.dom.xmonth = 5 + Math.round(i * 0.5); |
---|
445 | }else{ |
---|
446 | m.dom.xmonth = Math.round((i-1) * 0.5); |
---|
447 | } |
---|
448 | }); |
---|
449 | } |
---|
450 | }, |
---|
451 | |
---|
452 | // private |
---|
453 | showMonthPicker : function(){ |
---|
454 | if(!this.disabled){ |
---|
455 | this.createMonthPicker(); |
---|
456 | var size = this.el.getSize(); |
---|
457 | this.monthPicker.setSize(size); |
---|
458 | this.monthPicker.child('table').setSize(size); |
---|
459 | |
---|
460 | this.mpSelMonth = (this.activeDate || this.value).getMonth(); |
---|
461 | this.updateMPMonth(this.mpSelMonth); |
---|
462 | this.mpSelYear = (this.activeDate || this.value).getFullYear(); |
---|
463 | this.updateMPYear(this.mpSelYear); |
---|
464 | |
---|
465 | this.monthPicker.slideIn('t', {duration:0.2}); |
---|
466 | } |
---|
467 | }, |
---|
468 | |
---|
469 | // private |
---|
470 | updateMPYear : function(y){ |
---|
471 | this.mpyear = y; |
---|
472 | var ys = this.mpYears.elements; |
---|
473 | for(var i = 1; i <= 10; i++){ |
---|
474 | var td = ys[i-1], y2; |
---|
475 | if((i%2) === 0){ |
---|
476 | y2 = y + Math.round(i * 0.5); |
---|
477 | td.firstChild.innerHTML = y2; |
---|
478 | td.xyear = y2; |
---|
479 | }else{ |
---|
480 | y2 = y - (5-Math.round(i * 0.5)); |
---|
481 | td.firstChild.innerHTML = y2; |
---|
482 | td.xyear = y2; |
---|
483 | } |
---|
484 | this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel'); |
---|
485 | } |
---|
486 | }, |
---|
487 | |
---|
488 | // private |
---|
489 | updateMPMonth : function(sm){ |
---|
490 | this.mpMonths.each(function(m, a, i){ |
---|
491 | m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel'); |
---|
492 | }); |
---|
493 | }, |
---|
494 | |
---|
495 | // private |
---|
496 | selectMPMonth : function(m){ |
---|
497 | |
---|
498 | }, |
---|
499 | |
---|
500 | // private |
---|
501 | onMonthClick : function(e, t){ |
---|
502 | e.stopEvent(); |
---|
503 | var el = new Ext.Element(t), pn; |
---|
504 | if(el.is('button.x-date-mp-cancel')){ |
---|
505 | this.hideMonthPicker(); |
---|
506 | } |
---|
507 | else if(el.is('button.x-date-mp-ok')){ |
---|
508 | var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate()); |
---|
509 | if(d.getMonth() != this.mpSelMonth){ |
---|
510 | // 'fix' the JS rolling date conversion if needed |
---|
511 | d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth(); |
---|
512 | } |
---|
513 | this.update(d); |
---|
514 | this.hideMonthPicker(); |
---|
515 | } |
---|
516 | else if((pn = el.up('td.x-date-mp-month', 2))){ |
---|
517 | this.mpMonths.removeClass('x-date-mp-sel'); |
---|
518 | pn.addClass('x-date-mp-sel'); |
---|
519 | this.mpSelMonth = pn.dom.xmonth; |
---|
520 | } |
---|
521 | else if((pn = el.up('td.x-date-mp-year', 2))){ |
---|
522 | this.mpYears.removeClass('x-date-mp-sel'); |
---|
523 | pn.addClass('x-date-mp-sel'); |
---|
524 | this.mpSelYear = pn.dom.xyear; |
---|
525 | } |
---|
526 | else if(el.is('a.x-date-mp-prev')){ |
---|
527 | this.updateMPYear(this.mpyear-10); |
---|
528 | } |
---|
529 | else if(el.is('a.x-date-mp-next')){ |
---|
530 | this.updateMPYear(this.mpyear+10); |
---|
531 | } |
---|
532 | }, |
---|
533 | |
---|
534 | // private |
---|
535 | onMonthDblClick : function(e, t){ |
---|
536 | e.stopEvent(); |
---|
537 | var el = new Ext.Element(t), pn; |
---|
538 | if((pn = el.up('td.x-date-mp-month', 2))){ |
---|
539 | this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate())); |
---|
540 | this.hideMonthPicker(); |
---|
541 | } |
---|
542 | else if((pn = el.up('td.x-date-mp-year', 2))){ |
---|
543 | this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate())); |
---|
544 | this.hideMonthPicker(); |
---|
545 | } |
---|
546 | }, |
---|
547 | |
---|
548 | // private |
---|
549 | hideMonthPicker : function(disableAnim){ |
---|
550 | if(this.monthPicker){ |
---|
551 | if(disableAnim === true){ |
---|
552 | this.monthPicker.hide(); |
---|
553 | }else{ |
---|
554 | this.monthPicker.slideOut('t', {duration:0.2}); |
---|
555 | } |
---|
556 | } |
---|
557 | }, |
---|
558 | |
---|
559 | // private |
---|
560 | showPrevMonth : function(e){ |
---|
561 | this.update(this.activeDate.add('mo', -1)); |
---|
562 | }, |
---|
563 | |
---|
564 | // private |
---|
565 | showNextMonth : function(e){ |
---|
566 | this.update(this.activeDate.add('mo', 1)); |
---|
567 | }, |
---|
568 | |
---|
569 | // private |
---|
570 | showPrevYear : function(){ |
---|
571 | this.update(this.activeDate.add('y', -1)); |
---|
572 | }, |
---|
573 | |
---|
574 | // private |
---|
575 | showNextYear : function(){ |
---|
576 | this.update(this.activeDate.add('y', 1)); |
---|
577 | }, |
---|
578 | |
---|
579 | // private |
---|
580 | handleMouseWheel : function(e){ |
---|
581 | e.stopEvent(); |
---|
582 | if(!this.disabled){ |
---|
583 | var delta = e.getWheelDelta(); |
---|
584 | if(delta > 0){ |
---|
585 | this.showPrevMonth(); |
---|
586 | } else if(delta < 0){ |
---|
587 | this.showNextMonth(); |
---|
588 | } |
---|
589 | } |
---|
590 | }, |
---|
591 | |
---|
592 | // private |
---|
593 | handleDateClick : function(e, t){ |
---|
594 | e.stopEvent(); |
---|
595 | if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){ |
---|
596 | this.setValue(new Date(t.dateValue)); |
---|
597 | this.fireEvent('select', this, this.value); |
---|
598 | } |
---|
599 | }, |
---|
600 | |
---|
601 | // private |
---|
602 | selectToday : function(){ |
---|
603 | if(this.todayBtn && !this.todayBtn.disabled){ |
---|
604 | this.setValue(new Date().clearTime()); |
---|
605 | this.fireEvent('select', this, this.value); |
---|
606 | } |
---|
607 | }, |
---|
608 | |
---|
609 | // private |
---|
610 | update : function(date, forceRefresh){ |
---|
611 | var vd = this.activeDate, vis = this.isVisible(); |
---|
612 | this.activeDate = date; |
---|
613 | if(!forceRefresh && vd && this.el){ |
---|
614 | var t = date.getTime(); |
---|
615 | if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){ |
---|
616 | this.cells.removeClass('x-date-selected'); |
---|
617 | this.cells.each(function(c){ |
---|
618 | if(c.dom.firstChild.dateValue == t){ |
---|
619 | c.addClass('x-date-selected'); |
---|
620 | if(vis){ |
---|
621 | Ext.fly(c.dom.firstChild).focus(50); |
---|
622 | } |
---|
623 | return false; |
---|
624 | } |
---|
625 | }); |
---|
626 | return; |
---|
627 | } |
---|
628 | } |
---|
629 | var days = date.getDaysInMonth(); |
---|
630 | var firstOfMonth = date.getFirstDateOfMonth(); |
---|
631 | var startingPos = firstOfMonth.getDay()-this.startDay; |
---|
632 | |
---|
633 | if(startingPos <= this.startDay){ |
---|
634 | startingPos += 7; |
---|
635 | } |
---|
636 | |
---|
637 | var pm = date.add('mo', -1); |
---|
638 | var prevStart = pm.getDaysInMonth()-startingPos; |
---|
639 | |
---|
640 | var cells = this.cells.elements; |
---|
641 | var textEls = this.textNodes; |
---|
642 | days += startingPos; |
---|
643 | |
---|
644 | // convert everything to numbers so it's fast |
---|
645 | var day = 86400000; |
---|
646 | var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(); |
---|
647 | var today = new Date().clearTime().getTime(); |
---|
648 | var sel = date.clearTime().getTime(); |
---|
649 | var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY; |
---|
650 | var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY; |
---|
651 | var ddMatch = this.disabledDatesRE; |
---|
652 | var ddText = this.disabledDatesText; |
---|
653 | var ddays = this.disabledDays ? this.disabledDays.join('') : false; |
---|
654 | var ddaysText = this.disabledDaysText; |
---|
655 | var format = this.format; |
---|
656 | |
---|
657 | if(this.showToday){ |
---|
658 | var td = new Date().clearTime(); |
---|
659 | var disable = (td < min || td > max || |
---|
660 | (ddMatch && format && ddMatch.test(td.dateFormat(format))) || |
---|
661 | (ddays && ddays.indexOf(td.getDay()) != -1)); |
---|
662 | |
---|
663 | if(!this.disabled){ |
---|
664 | this.todayBtn.setDisabled(disable); |
---|
665 | this.todayKeyListener[disable ? 'disable' : 'enable'](); |
---|
666 | } |
---|
667 | } |
---|
668 | |
---|
669 | var setCellClass = function(cal, cell){ |
---|
670 | cell.title = ''; |
---|
671 | var t = d.getTime(); |
---|
672 | cell.firstChild.dateValue = t; |
---|
673 | if(t == today){ |
---|
674 | cell.className += ' x-date-today'; |
---|
675 | cell.title = cal.todayText; |
---|
676 | } |
---|
677 | if(t == sel){ |
---|
678 | cell.className += ' x-date-selected'; |
---|
679 | if(vis){ |
---|
680 | Ext.fly(cell.firstChild).focus(50); |
---|
681 | } |
---|
682 | } |
---|
683 | // disabling |
---|
684 | if(t < min) { |
---|
685 | cell.className = ' x-date-disabled'; |
---|
686 | cell.title = cal.minText; |
---|
687 | return; |
---|
688 | } |
---|
689 | if(t > max) { |
---|
690 | cell.className = ' x-date-disabled'; |
---|
691 | cell.title = cal.maxText; |
---|
692 | return; |
---|
693 | } |
---|
694 | if(ddays){ |
---|
695 | if(ddays.indexOf(d.getDay()) != -1){ |
---|
696 | cell.title = ddaysText; |
---|
697 | cell.className = ' x-date-disabled'; |
---|
698 | } |
---|
699 | } |
---|
700 | if(ddMatch && format){ |
---|
701 | var fvalue = d.dateFormat(format); |
---|
702 | if(ddMatch.test(fvalue)){ |
---|
703 | cell.title = ddText.replace('%0', fvalue); |
---|
704 | cell.className = ' x-date-disabled'; |
---|
705 | } |
---|
706 | } |
---|
707 | }; |
---|
708 | |
---|
709 | var i = 0; |
---|
710 | for(; i < startingPos; i++) { |
---|
711 | textEls[i].innerHTML = (++prevStart); |
---|
712 | d.setDate(d.getDate()+1); |
---|
713 | cells[i].className = 'x-date-prevday'; |
---|
714 | setCellClass(this, cells[i]); |
---|
715 | } |
---|
716 | for(; i < days; i++){ |
---|
717 | var intDay = i - startingPos + 1; |
---|
718 | textEls[i].innerHTML = (intDay); |
---|
719 | d.setDate(d.getDate()+1); |
---|
720 | cells[i].className = 'x-date-active'; |
---|
721 | setCellClass(this, cells[i]); |
---|
722 | } |
---|
723 | var extraDays = 0; |
---|
724 | for(; i < 42; i++) { |
---|
725 | textEls[i].innerHTML = (++extraDays); |
---|
726 | d.setDate(d.getDate()+1); |
---|
727 | cells[i].className = 'x-date-nextday'; |
---|
728 | setCellClass(this, cells[i]); |
---|
729 | } |
---|
730 | |
---|
731 | this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear()); |
---|
732 | |
---|
733 | if(!this.internalRender){ |
---|
734 | var main = this.el.dom.firstChild; |
---|
735 | var w = main.offsetWidth; |
---|
736 | this.el.setWidth(w + this.el.getBorderWidth('lr')); |
---|
737 | Ext.fly(main).setWidth(w); |
---|
738 | this.internalRender = true; |
---|
739 | // opera does not respect the auto grow header center column |
---|
740 | // then, after it gets a width opera refuses to recalculate |
---|
741 | // without a second pass |
---|
742 | if(Ext.isOpera && !this.secondPass){ |
---|
743 | main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px'; |
---|
744 | this.secondPass = true; |
---|
745 | this.update.defer(10, this, [date]); |
---|
746 | } |
---|
747 | } |
---|
748 | }, |
---|
749 | |
---|
750 | // private |
---|
751 | beforeDestroy : function() { |
---|
752 | if(this.rendered){ |
---|
753 | this.keyNav.disable(); |
---|
754 | this.keyNav = null; |
---|
755 | Ext.destroy( |
---|
756 | this.leftClickRpt, |
---|
757 | this.rightClickRpt, |
---|
758 | this.monthPicker, |
---|
759 | this.eventEl, |
---|
760 | this.mbtn, |
---|
761 | this.todayBtn |
---|
762 | ); |
---|
763 | } |
---|
764 | } |
---|
765 | |
---|
766 | /** |
---|
767 | * @cfg {String} autoEl @hide |
---|
768 | */ |
---|
769 | }); |
---|
770 | |
---|
771 | Ext.reg('datepicker', Ext.DatePicker); |
---|