- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
- */
-<span id='Ext-picker.Date-cfg-disabledDaysText'> /**
-</span> * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
- */
- disabledDaysText : 'Disabled',
-<span id='Ext-picker.Date-cfg-disabledDatesText'> /**
-</span> * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
- */
- disabledDatesText : 'Disabled',
-<span id='Ext-picker.Date-cfg-monthNames'> /**
-</span> * @cfg {Array} monthNames
- * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
- */
-<span id='Ext-picker.Date-cfg-dayNames'> /**
-</span> * @cfg {Array} dayNames
- * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
- */
-<span id='Ext-picker.Date-cfg-nextText'> /**
-</span> * @cfg {String} nextText
- * The next month navigation button tooltip (defaults to <code>'Next Month (Control+Right)'</code>)
- */
- nextText : 'Next Month (Control+Right)',
-<span id='Ext-picker.Date-cfg-prevText'> /**
-</span> * @cfg {String} prevText
- * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
- */
- prevText : 'Previous Month (Control+Left)',
-<span id='Ext-picker.Date-cfg-monthYearText'> /**
-</span> * @cfg {String} monthYearText
- * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
- */
- monthYearText : 'Choose a month (Control+Up/Down to move years)',
-<span id='Ext-picker.Date-cfg-startDay'> /**
-</span> * @cfg {Number} startDay
- * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
- */
- startDay : 0,
-<span id='Ext-picker.Date-cfg-showToday'> /**
-</span> * @cfg {Boolean} showToday
- * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
- * that selects the current date (defaults to <code>true</code>).
- */
- showToday : true,
-<span id='Ext-picker.Date-cfg-minDate'> /**
-</span> * @cfg {Date} minDate
- * Minimum allowable date (JavaScript date object, defaults to null)
- */
-<span id='Ext-picker.Date-cfg-maxDate'> /**
-</span> * @cfg {Date} maxDate
- * Maximum allowable date (JavaScript date object, defaults to null)
- */
-<span id='Ext-picker.Date-cfg-disabledDays'> /**
-</span> * @cfg {Array} disabledDays
- * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
-<span id='Ext-picker.Date-cfg-disabledDatesRE'> /**
-</span> * @cfg {RegExp} disabledDatesRE
- * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates}
- * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
- * disabledDates value.
- */
-<span id='Ext-picker.Date-cfg-disabledDates'> /**
-</span> * @cfg {Array} disabledDates
- * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
- * expression so they are very powerful. Some examples:
- * <ul>
- * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
- * <li>['03/08', '09/16'] would disable those days for every year</li>
- * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
- * <li>['03/../2006'] would disable every day in March 2006</li>
- * <li>['^03'] would disable every day in every March</li>
- * </ul>
- * Note that the format of the dates included in the array should exactly match the {@link #format} config.
- * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
- * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
- */
-
-<span id='Ext-picker.Date-cfg-disableAnim'> /**
-</span> * @cfg {Boolean} disableAnim True to disable animations when showing the month picker. Defaults to <tt>false</tt>.
- */
- disableAnim: true,
-
-<span id='Ext-picker.Date-cfg-baseCls'> /**
-</span> * @cfg {String} baseCls
- * The base CSS class to apply to this components element (defaults to <tt>'x-datepicker'</tt>).
- */
- baseCls: Ext.baseCSSPrefix + 'datepicker',
-
-<span id='Ext-picker.Date-cfg-selectedCls'> /**
-</span> * @cfg {String} selectedCls
- * The class to apply to the selected cell. Defaults to <tt>'x-datepicker-selected'</tt>
- */
-
-<span id='Ext-picker.Date-cfg-disabledCellCls'> /**
-</span> * @cfg {String} disabledCellCls
- * The class to apply to disabled cells. Defaults to <tt>'x-datepicker-disabled'</tt>
- */
-
-<span id='Ext-picker.Date-cfg-longDayFormat'> /**
-</span> * @cfg {String} longDayFormat
- * The format for displaying a date in a longer format. Defaults to <tt>'F d, Y'</tt>
- */
- longDayFormat: 'F d, Y',
-
-<span id='Ext-picker.Date-cfg-keyNavConfig'> /**
-</span> * @cfg {Object} keyNavConfig Specifies optional custom key event handlers for the {@link Ext.util.KeyNav}
- * attached to this date picker. Must conform to the config format recognized by the {@link Ext.util.KeyNav}
- * constructor. Handlers specified in this object will replace default handlers of the same name.
- */
-
-<span id='Ext-picker.Date-cfg-focusOnShow'> /**
-</span> * @cfg {Boolean} focusOnShow
- * True to automatically focus the picker on show. Defaults to <tt>false</tt>.
- */
- focusOnShow: false,
-
- // private
- // Set by other components to stop the picker focus being updated when the value changes.
- focusOnSelect: true,
-
- width: 178,
-
- // default value used to initialise each date in the DatePicker
- // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
- initHour: 12, // 24-hour format
-
- numDays: 42,
-
- // private, inherit docs
- initComponent : function() {
- var me = this,
- clearTime = Ext.Date.clearTime;
-
- me.selectedCls = me.baseCls + '-selected';
- me.disabledCellCls = me.baseCls + '-disabled';
- me.prevCls = me.baseCls + '-prevday';
- me.activeCls = me.baseCls + '-active';
- me.nextCls = me.baseCls + '-prevday';
- me.todayCls = me.baseCls + '-today';
- me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
- this.callParent();
-
- me.value = me.value ?
- clearTime(me.value, true) : clearTime(new Date());
-
- me.addEvents(
-<span id='Ext-picker.Date-event-select'> /**
-</span> * @event select
- * Fires when a date is selected
- * @param {DatePicker} this DatePicker
- * @param {Date} date The selected date
- */
- 'select'
- );
-
- me.initDisabledDays();
- },
-
- // private, inherit docs
- onRender : function(container, position){
- /*
- * days array for looping through 6 full weeks (6 weeks * 7 days)
- * Note that we explicitly force the size here so the template creates
- * all the appropriate cells.
- */
-
- var me = this,
- days = new Array(me.numDays),
- today = Ext.Date.format(new Date(), me.format);
-
- Ext.applyIf(me, {
- renderData: {},
- renderSelectors: {}
- });
-
- Ext.apply(me.renderData, {
- dayNames: me.dayNames,
- ariaTitle: me.ariaTitle,
- value: me.value,
- showToday: me.showToday,
- prevText: me.prevText,
- nextText: me.nextText,
- days: days
- });
- me.getTpl('renderTpl').longDayFormat = me.longDayFormat;
-
- Ext.apply(me.renderSelectors, {
- eventEl: 'table.' + me.baseCls + '-inner',
- prevEl: '.' + me.baseCls + '-prev a',
- nextEl: '.' + me.baseCls + '-next a',
- middleBtnEl: '.' + me.baseCls + '-month',
- footerEl: '.' + me.baseCls + '-footer'
- });
-
- this.callParent(arguments);
- me.el.unselectable();
-
- me.cells = me.eventEl.select('tbody td');
- me.textNodes = me.eventEl.query('tbody td span');
-
- me.monthBtn = Ext.create('Ext.button.Split', {
- text: '',
- tooltip: me.monthYearText,
- renderTo: me.middleBtnEl
- });
- //~ me.middleBtnEl.down('button').addCls(Ext.baseCSSPrefix + 'btn-arrow');
-
-
- me.todayBtn = Ext.create('Ext.button.Button', {
- renderTo: me.footerEl,
- text: Ext.String.format(me.todayText, today),
- tooltip: Ext.String.format(me.todayTip, today),
- handler: me.selectToday,
- scope: me
- });
- },
-
- // private, inherit docs
- initEvents: function(){
- var me = this,
- eDate = Ext.Date,
- day = eDate.DAY;
-
- this.callParent();
-
- me.prevRepeater = Ext.create('Ext.util.ClickRepeater', me.prevEl, {
- handler: me.showPrevMonth,
- scope: me,
- preventDefault: true,
- stopDefault: true
- });
-
- me.nextRepeater = Ext.create('Ext.util.ClickRepeater', me.nextEl, {
- handler: me.showNextMonth,
- scope: me,
- preventDefault:true,
- stopDefault:true
- });
-
- me.keyNav = Ext.create('Ext.util.KeyNav', me.eventEl, Ext.apply({
- scope: me,
- 'left' : function(e){
- if(e.ctrlKey){
- me.showPrevMonth();
- }else{
- me.update(eDate.add(me.activeDate, day, -1));
- }
- },
-
- 'right' : function(e){
- if(e.ctrlKey){
- me.showNextMonth();
- }else{
- me.update(eDate.add(me.activeDate, day, 1));
- }
- },
-
- 'up' : function(e){
- if(e.ctrlKey){
- me.showNextYear();
- }else{
- me.update(eDate.add(me.activeDate, day, -7));
- }
- },
-
- 'down' : function(e){
- if(e.ctrlKey){
- me.showPrevYear();
- }else{
- me.update(eDate.add(me.activeDate, day, 7));
- }
- },
- 'pageUp' : me.showNextMonth,
- 'pageDown' : me.showPrevMonth,
- 'enter' : function(e){
- e.stopPropagation();
- return true;
- }
- }, me.keyNavConfig));
-
- if(me.showToday){
- me.todayKeyListener = me.eventEl.addKeyListener(Ext.EventObject.SPACE, me.selectToday, me);
- }
- me.mon(me.eventEl, 'mousewheel', me.handleMouseWheel, me);
- me.mon(me.eventEl, 'click', me.handleDateClick, me, {delegate: 'a.' + me.baseCls + '-date'});
- me.mon(me.monthBtn, 'click', me.showMonthPicker, me);
- me.mon(me.monthBtn, 'arrowclick', me.showMonthPicker, me);
- me.update(me.value);
- },
-
-<span id='Ext-picker.Date-method-initDisabledDays'> /**
-</span> * Setup the disabled dates regex based on config options
- * @private
- */
- initDisabledDays : function(){
- var me = this,
- dd = me.disabledDates,
- re = '(?:',
- len;
-
- if(!me.disabledDatesRE && dd){
- len = dd.length - 1;
-
- Ext.each(dd, function(d, i){
- re += Ext.isDate(d) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(d, me.format)) + '$' : dd[i];
- if(i != len){
- re += '|';
- }
- }, me);
- me.disabledDatesRE = new RegExp(re + ')');
- }
- },
-
-<span id='Ext-picker.Date-method-setDisabledDates'> /**
-</span> * Replaces any existing disabled dates with new values and refreshes the DatePicker.
- * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
- * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
- * @return {Ext.picker.Date} this
- */
- setDisabledDates : function(dd){
- var me = this;
-
- if(Ext.isArray(dd)){
- me.disabledDates = dd;
- me.disabledDatesRE = null;
- }else{
- me.disabledDatesRE = dd;
- }
- me.initDisabledDays();
- me.update(me.value, true);
- return me;
- },
-
-<span id='Ext-picker.Date-method-setDisabledDays'> /**
-</span> * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
- * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
- * for details on supported values.
- * @return {Ext.picker.Date} this
- */
- setDisabledDays : function(dd){
- this.disabledDays = dd;
- return this.update(this.value, true);
- },
-
-<span id='Ext-picker.Date-method-setMinDate'> /**
-</span> * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
- * @param {Date} value The minimum date that can be selected
- * @return {Ext.picker.Date} this
- */
- setMinDate : function(dt){
- this.minDate = dt;
- return this.update(this.value, true);
- },
-
-<span id='Ext-picker.Date-method-setMaxDate'> /**
-</span> * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
- * @param {Date} value The maximum date that can be selected
- * @return {Ext.picker.Date} this
- */
- setMaxDate : function(dt){
- this.maxDate = dt;
- return this.update(this.value, true);
- },
-
-<span id='Ext-picker.Date-method-setValue'> /**
-</span> * Sets the value of the date field
- * @param {Date} value The date to set
- * @return {Ext.picker.Date} this