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