[625] | 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); |
---|