ExtJS6.0扩展日期选择控件为也可以选择时间

1  ‘<tpl if="showToday">‘,
2                 //‘<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>‘,
3               ‘<div id="{id}-footerEl" role="presentation" style="background-color:#D9E5F3;border-top:0px solid #99BCE8;">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%}&nbsp;&nbsp;{%this.renderTodayBtn(values, out)%}</center></div>‘,
4             ‘</tpl>‘,

 1 longDay: function(value){
 2                 return Ext.Date.format(value, this.longDayFormat);
 3             },
 4             renderHour: function(values, out) {
 5                 out.push(‘<font  style="float : left;">&nbsp&nbsp</font>‘);
 6                 Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
 7             },
 8             renderMinute: function(values, out) {
 9                 out.push(‘<font  style="float : left;font-weight:bold;">&nbsp:&nbsp&nbsp</font>‘);
10                 Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
11             },
12             renderSecond: function(values, out) {
13                 out.push(‘<font style="float : left;font-weight:bold;">&nbsp:&nbsp&nbsp</font>‘);
14                 Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
15             },
16             renderOkQueDingBtn: function(values, out) {  
17                 Ext.DomHelper.generateMarkup(values.$comp.okQueDingBtn.getRenderTree(), out);  
18             },

me.monthBtn = new Ext.button.Split({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: ‘‘,
            tooltip: me.monthYearText,
            tabIndex: -1,
            ariaRole: ‘presentation‘,
            listeners: {
                click: me.doShowMonthPicker,
                arrowclick: me.doShowMonthPicker,
                scope: me
            }
        });

        me.hour = Ext.create(‘Ext.form.field.Number‘, {
            scope: me,
            ownerCt: me,
            editable : true,
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 23,
            width: 70,
            style : {float:"left"},
            enableKeyEvents: true,
            listeners: {
                 keyup: function(field, e){
                     if (field.getValue() > 23){
                         e.stopEvent();
                         field.setValue(23);
                     }
                 }
             }
        });
        
        me.minute = Ext.create(‘Ext.form.field.Number‘, {
            scope: me,
            ownerCt: me,
            style : {float:"left"},
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            editable : true,
            width: 70,
            enableKeyEvents: true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 59){
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });
        
      me.second = Ext.create(‘Ext.form.field.Number‘, {
            scope: me,
            ownerCt: me,
            editable : true,
            style : {float:"left"},
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            width: 70,
            enableKeyEvents: true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 59){
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });
       me.okQueDingBtn = new Ext.button.Button({  
            ownerCt: me,  
            ownerLayout: me.getComponentLayout(),  
            text: me.okText,  
            tooltip: me.okTip,  
            tooltipType:‘title‘,  
            handler:me.okQueDingHandler,//确认按钮的事件委托  
            scope: me  
        });  

 1 /** 
 2      * 确认 按钮触发的调用 
 3      */  
 4     okQueDingHandler : function(){  
 5         var me = this,  
 6             btn = me.okQueDingBtn;  
 7   
 8         if(btn && !btn.disabled){  
 9             me.setValue(this.getValue());  
10             me.fireEvent(‘select‘, me, me.value);  
11             me.onSelect();  
12         }  
13         return me;  
14     },  

1         date.setHours(me.hour.getValue());
2         date.setMinutes(me.minute.getValue());
3         date.setSeconds(me.second.getValue());

 1 beforeDestroy: function() {
 2         var me = this;
 3 
 4         if (me.rendered) {
 5             Ext.destroy(
 6                 me.keyNav,
 7                 me.monthPicker,
 8                 me.monthBtn,
 9                 me.nextRepeater,
10                 me.prevRepeater,
11                 me.todayBtn,
12                 me.okQueDingBtn,
13                 me.todayElSpan
14             );
15             delete me.textNodes;
16             delete me.cells.elements;
17         }
18         me.callParent();
19     },

 1  finishRenderChildren: function () {
 2             var me = this;
 3 
 4             me.callParent();
 5             me.monthBtn.finishRender();
 6             me.okQueDingBtn.finishRender();  
 7             if (me.showToday) {
 8                 me.todayBtn.finishRender();
 9             }
10             //添加时间相关
11             this.hour.finishRender();
12             this.minute.finishRender();
13             this.second.finishRender();
14         },
15         

   1 /**
   2  * A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid
   3  * dates in a popup next to the field, but may also be used with other components.
   4  *
   5  * Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;
   6  * you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
   7  *
   8  * By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
   9  * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
  10  *
  11  * All the string values documented below may be overridden by including an Ext locale file in your page.
  12  *
  13  *     @example
  14  *     Ext.create(‘Ext.panel.Panel‘, {
  15  *         title: ‘Choose a future date:‘,
  16  *         width: 200,
  17  *         bodyPadding: 10,
  18  *         renderTo: Ext.getBody(),
  19  *         items: [{
  20  *             xtype: ‘datepicker‘,
  21  *             minDate: new Date(),
  22  *             handler: function(picker, date) {
  23  *                 // do something with the selected date
  24  *             }
  25  *         }]
  26  *     });
  27  */
  28 Ext.define(‘Ext.ux.DateTimePicker‘, {
  29     extend: ‘Ext.Component‘,
  30     alias: ‘widget.datetimepicker‘,
  31     alternateClassName: ‘Ext.DateTimePicker‘,
  32     requires: [
  33         ‘Ext.XTemplate‘,
  34         ‘Ext.button.Button‘,
  35         ‘Ext.button.Split‘,
  36         ‘Ext.util.ClickRepeater‘,
  37         ‘Ext.util.KeyNav‘,
  38         ‘Ext.fx.Manager‘,
  39         ‘Ext.picker.Month‘
  40     ],
  41     
  42     //<locale>
  43     /**
  44      * @cfg {String} todayText
  45      * The text to display on the button that selects the current date
  46      */
  47     todayText: ‘Today‘,
  48     //添加确定按钮
  49     okText:‘Ok‘,
  50     okTip:‘Ok‘,
  51     //</locale>
  52     
  53     //<locale>
  54     /**
  55      * @cfg {String} ariaTitle
  56      * The text to display for the aria title
  57      */
  58     ariaTitle: ‘Date Picker: {0}‘,
  59     //</locale>
  60     
  61     //<locale>
  62     /**
  63      * @cfg {String} ariaTitleDateFormat
  64      * The date format to display for the current value in the {@link #ariaTitle}
  65      */
  66     ariaTitleDateFormat: ‘F d‘,
  67     //</locale>
  68 
  69     /**
  70      * @cfg {Function} handler
  71      * Optional. A function that will handle the select event of this picker. The handler is passed the following
  72      * parameters:
  73      *
  74      *   - `picker` : Ext.picker.Date
  75      *
  76      * This Date picker.
  77      *
  78      *   - `date` : Date
  79      *
  80      * The selected date.
  81      */
  82 
  83     /**
  84      * @cfg {Object} scope
  85      * The scope (`this` reference) in which the `{@link #handler}` function will be called.
  86      *
  87      * Defaults to this DatePicker instance.
  88      */
  89 
  90     //<locale>
  91     /**
  92      * @cfg {String} todayTip
  93      * A string used to format the message for displaying in a tooltip over the button that selects the current date.
  94      * The `{0}` token in string is replaced by today‘s date.
  95      */
  96     todayTip: ‘{0} (Spacebar)‘,
  97     //</locale>
  98 
  99     //<locale>
 100     /**
 101      * @cfg {String} minText
 102      * The error text to display if the minDate validation fails.
 103      */
 104     minText: ‘This date is before the minimum date‘,
 105     //</locale>
 106     
 107     //<locale>
 108     /**
 109      * @cfg {String} ariaMinText The text that will be announced by Assistive Technologies
 110      * such as screen readers when user is navigating to the cell which date is less than
 111      * {@link #minDate}.
 112      */
 113     ariaMinText: "This date is before the minimum date",
 114     //</locale>
 115 
 116     //<locale>
 117     /**
 118      * @cfg {String} maxText
 119      * The error text to display if the maxDate validation fails.
 120      */
 121     maxText: ‘This date is after the maximum date‘,
 122     //</locale>
 123     
 124     //<locale>
 125     /**
 126      * @cfg {String} ariaMaxText The text that will be announced by Assistive Technologies
 127      * such as screen readers when user is navigating to the cell which date is later than
 128      * {@link #maxDate}.
 129      */
 130     ariaMaxText: "This date is after the maximum date",
 131     //</locale>
 132 
 133     /**
 134      * @cfg {String} format
 135      * The default date format string which can be overriden for localization support. The format must be valid
 136      * according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
 137      */
 138 
 139     //<locale>
 140     /**
 141      * @cfg {String} disabledDaysText
 142      * The tooltip to display when the date falls on a disabled day.
 143      */
 144     disabledDaysText: ‘Disabled‘,
 145     //</locale>
 146     
 147     //<locale>
 148     /**
 149      * @cfg {String} ariaDisabledDaysText The text that Assistive Technologies such as screen readers
 150      * will announce when the date falls on a disabled day of week.
 151      */
 152     ariaDisabledDaysText: "This day of week is disabled",
 153     //</locale>
 154     
 155     //<locale>
 156     /**
 157      * @cfg {String} disabledDatesText
 158      * The tooltip text to display when the date falls on a disabled date.
 159      */
 160     disabledDatesText: ‘Disabled‘,
 161     //</locale>
 162 
 163     //<locale>
 164     /**
 165      * @cfg {String} ariaDisabledDatesText The text that Assistive Technologies such as screen readers
 166      * will announce when the date falls on a disabled date.
 167      */
 168     ariaDisabledDatesText: "This date is disabled",
 169     
 170     //</locale>
 171     /**
 172      * @cfg {String[]} monthNames
 173      * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
 174      * @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}
 175      */
 176 
 177     /**
 178      * @cfg {String[]} dayNames
 179      * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
 180      * @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}
 181      */
 182 
 183     //<locale>
 184     /**
 185      * @cfg {String} nextText
 186      * The next month navigation button tooltip
 187      */
 188     nextText: ‘Next Month (Control+Right)‘,
 189     //</locale>
 190 
 191     //<locale>
 192     /**
 193      * @cfg {String} prevText
 194      * The previous month navigation button tooltip
 195      */
 196     prevText: ‘Previous Month (Control+Left)‘,
 197     //</locale>
 198 
 199     //<locale>
 200     /**
 201      * @cfg {String} monthYearText
 202      * The header month selector tooltip
 203      */
 204     monthYearText: ‘Choose a month (Control+Up/Down to move years)‘,
 205     //</locale>
 206     
 207     //<locale>
 208     /**
 209      * @cfg {String} monthYearFormat
 210      * The date format for the header month
 211      */
 212     monthYearFormat: ‘F Y‘,
 213     //</locale>
 214 
 215     //<locale>
 216     /**
 217      * @cfg {Number} [startDay=undefined]
 218      * Day index at which the week should begin, 0-based.
 219      *
 220      * Defaults to `0` (Sunday).
 221      */
 222     startDay: 0,
 223     //</locale>
 224 
 225     //<locale>
 226     /**
 227      * @cfg {Boolean} showToday
 228      * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that
 229      * selects the current date.
 230      */
 231     showToday: true,
 232     //</locale>
 233 
 234     /**
 235      * @cfg {Date} [minDate=null]
 236      * Minimum allowable date (JavaScript date object)
 237      */
 238 
 239     /**
 240      * @cfg {Date} [maxDate=null]
 241      * Maximum allowable date (JavaScript date object)
 242      */
 243 
 244     /**
 245      * @cfg {Number[]} [disabledDays=null]
 246      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
 247      */
 248 
 249     /**
 250      * @cfg {RegExp} [disabledDatesRE=null]
 251      * JavaScript regular expression used to disable a pattern of dates. The {@link #disabledDates}
 252      * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
 253      * disabledDates value.
 254      */
 255 
 256     /**
 257      * @cfg {String[]} disabledDates
 258      * An array of ‘dates‘ to disable, as strings. These strings will be used to build a dynamic regular expression so
 259      * they are very powerful. Some examples:
 260      *
 261      *   - [‘03/08/2003‘, ‘09/16/2003‘] would disable those exact dates
 262      *   - [‘03/08‘, ‘09/16‘] would disable those days for every year
 263      *   - [‘^03/08‘] would only match the beginning (useful if you are using short years)
 264      *   - [‘03/../2006‘] would disable every day in March 2006
 265      *   - [‘^03‘] would disable every day in every March
 266      *
 267      * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
 268      * to support regular expressions, if you are using a date format that has ‘.‘ in it, you will have to escape the
 269      * dot when restricting dates. For example: [‘03\\.08\\.03‘].
 270      */
 271 
 272     /**
 273      * @cfg {Boolean} disableAnim
 274      * True to disable animations when showing the month picker.
 275      */
 276     disableAnim: false,
 277 
 278     /**
 279      * @cfg {String} [baseCls=‘x-datepicker‘]
 280      * The base CSS class to apply to this components element.
 281      */
 282     baseCls: Ext.baseCSSPrefix + ‘datepicker‘,
 283 
 284     /**
 285      * @cfg {String} [selectedCls=‘x-datepicker-selected‘]
 286      * The class to apply to the selected cell.
 287      */
 288 
 289     /**
 290      * @cfg {String} [disabledCellCls=‘x-datepicker-disabled‘]
 291      * The class to apply to disabled cells.
 292      */
 293 
 294     //<locale>
 295     /**
 296      * @cfg {String} longDayFormat
 297      * The format for displaying a date in a longer format.
 298      */
 299     longDayFormat: ‘F d, Y‘,
 300     //</locale>
 301 
 302     /**
 303      * @cfg {Object} keyNavConfig
 304      * Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must
 305      * conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this
 306      * object will replace default handlers of the same name.
 307      */
 308 
 309     /**
 310      * @cfg {String}
 311      * The {@link Ext.button.Button#ui} to use for the date picker‘s footer buttons.
 312      */
 313     footerButtonUI: ‘default‘,
 314 
 315     isDatePicker: true,
 316     
 317     ariaRole: ‘region‘,
 318     focusable: true,
 319 
 320     childEls: [
 321         ‘innerEl‘, ‘eventEl‘, ‘prevEl‘, ‘nextEl‘, ‘middleBtnEl‘, ‘footerEl‘
 322     ],
 323     
 324     border: true,
 325     
 326     /**
 327      * @cfg
 328      * @inheritdoc
 329      */
 330     renderTpl: [
 331         ‘<div id="{id}-innerEl" data-ref="innerEl" role="presentation">‘,
 332             ‘<div class="{baseCls}-header">‘,
 333                 ‘<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>‘,
 334                 ‘<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>‘,
 335                 ‘<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>‘,
 336             ‘</div>‘,
 337             ‘<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0">‘,
 338                 ‘<thead>‘,
 339                     ‘<tr role="row">‘,
 340                         ‘<tpl for="dayNames">‘,
 341                             ‘<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">‘,
 342                                 ‘<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>‘,
 343                             ‘</th>‘,
 344                         ‘</tpl>‘,
 345                     ‘</tr>‘,
 346                 ‘</thead>‘,
 347                 ‘<tbody>‘,
 348                     ‘<tr role="row">‘,
 349                         ‘<tpl for="days">‘,
 350                             ‘{#:this.isEndOfWeek}‘,
 351                             ‘<td role="gridcell">‘,
 352                                 ‘<div hidefocus="on" class="{parent.baseCls}-date"></div>‘,
 353                             ‘</td>‘,
 354                         ‘</tpl>‘,
 355                     ‘</tr>‘,
 356                 ‘</tbody>‘,
 357             ‘</table>‘,
 358             ‘<tpl if="showToday">‘,
 359                 //‘<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>‘,
 360               ‘<div id="{id}-footerEl" role="presentation" style="background-color:#D9E5F3;border-top:0px solid #99BCE8;">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%}&nbsp;&nbsp;{%this.renderTodayBtn(values, out)%}</center></div>‘,
 361             ‘</tpl>‘,
 362             // These elements are used with Assistive Technologies such as screen readers
 363             ‘<div id="{id}-todayText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{todayText}.</div>‘,
 364             ‘<div id="{id}-todayText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{okText}.</div>‘,
 365             ‘<div id="{id}-ariaMinText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{ariaMinText}.</div>‘,
 366             ‘<div id="{id}-ariaMaxText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{ariaMaxText}.</div>‘,
 367             ‘<div id="{id}-ariaDisabledDaysText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{ariaDisabledDaysText}.</div>‘,
 368             ‘<div id="{id}-ariaDisabledDatesText" class="‘ + Ext.baseCSSPrefix + ‘hidden-clip">{ariaDisabledDatesText}.</div>‘,
 369         ‘</div>‘,
 370         {
 371             firstInitial: function(value) {
 372                 return Ext.picker.Date.prototype.getDayInitial(value);
 373             },
 374             isEndOfWeek: function(value) {
 375                 // convert from 1 based index to 0 based
 376                 // by decrementing value once.
 377                 value--;
 378                 var end = value % 7 === 0 && value !== 0;
 379                 return end ? ‘</tr><tr role="row">‘ : ‘‘;
 380             },
 381             longDay: function(value){
 382                 return Ext.Date.format(value, this.longDayFormat);
 383             },
 384             renderHour: function(values, out) {
 385                 out.push(‘<font  style="float : left;">&nbsp&nbsp</font>‘);
 386                 Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
 387             },
 388             renderMinute: function(values, out) {
 389                 out.push(‘<font  style="float : left;font-weight:bold;">&nbsp:&nbsp&nbsp</font>‘);
 390                 Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
 391             },
 392             renderSecond: function(values, out) {
 393                 out.push(‘<font style="float : left;font-weight:bold;">&nbsp:&nbsp&nbsp</font>‘);
 394                 Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
 395             },
 396             renderOkQueDingBtn: function(values, out) {  
 397                 Ext.DomHelper.generateMarkup(values.$comp.okQueDingBtn.getRenderTree(), out);  
 398             },
 399             renderTodayBtn: function(values, out) {
 400                 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
 401             },
 402             renderMonthBtn: function(values, out) {
 403                 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
 404             }
 405         }
 406     ],
 407 
 408     // Default value used to initialise each date in the DatePicker.
 409     // __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.
 410     initHour: 12, // 24-hour format
 411 
 412     numDays: 42,
 413 
 414     /**
 415      * @event select
 416      * Fires when a date is selected
 417      * @param {Ext.picker.Date} this DatePicker
 418      * @param {Date} date The selected date
 419      */
 420 
 421     /**
 422      * @private
 423      * @inheritdoc
 424      */
 425     initComponent: function() {
 426         var me = this,
 427             clearTime = Ext.Date.clearTime;
 428 
 429         me.selectedCls = me.baseCls + ‘-selected‘;
 430         me.disabledCellCls = me.baseCls + ‘-disabled‘;
 431         me.prevCls = me.baseCls + ‘-prevday‘;
 432         me.activeCls = me.baseCls + ‘-active‘;
 433         me.cellCls = me.baseCls + ‘-cell‘;
 434         me.nextCls = me.baseCls + ‘-prevday‘;
 435         me.todayCls = me.baseCls + ‘-today‘;
 436         
 437         
 438         if (!me.format) {
 439             me.format = Ext.Date.defaultFormat;
 440         }
 441         if (!me.dayNames) {
 442             me.dayNames = Ext.Date.dayNames;
 443         }
 444         me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
 445 
 446         me.callParent();
 447 
 448         me.value = me.value ? clearTime(me.value, true) : clearTime(new Date());
 449 
 450         me.initDisabledDays();
 451     },
 452 
 453     // Keep the tree structure correct for Ext.form.field.Picker input fields which poke a ‘pickerField‘ reference down into their pop-up pickers.
 454     getRefOwner: function() {
 455         return this.pickerField || this.callParent();
 456     },
 457 
 458     getRefItems: function() {
 459         var results = [],
 460             monthBtn = this.monthBtn,
 461             todayBtn = this.todayBtn;
 462 
 463         if (monthBtn) {
 464             results.push(monthBtn);
 465         }
 466 
 467         if (todayBtn) {
 468             results.push(todayBtn);
 469         }
 470 
 471         return results;
 472     },
 473 
 474     beforeRender: function() {
 475         /*
 476          * days array for looping through 6 full weeks (6 weeks * 7 days)
 477          * Note that we explicitly force the size here so the template creates
 478          * all the appropriate cells.
 479          */
 480         var me = this,
 481             encode = Ext.String.htmlEncode,
 482             days = new Array(me.numDays),
 483             today = Ext.Date.format(new Date(), me.format);
 484 
 485         if (me.padding && !me.width) {
 486             me.cacheWidth();
 487         }
 488 
 489         me.monthBtn = new Ext.button.Split({
 490             ownerCt: me,
 491             ownerLayout: me.getComponentLayout(),
 492             text: ‘‘,
 493             tooltip: me.monthYearText,
 494             tabIndex: -1,
 495             ariaRole: ‘presentation‘,
 496             listeners: {
 497                 click: me.doShowMonthPicker,
 498                 arrowclick: me.doShowMonthPicker,
 499                 scope: me
 500             }
 501         });
 502 
 503         me.hour = Ext.create(‘Ext.form.field.Number‘, {
 504             scope: me,
 505             ownerCt: me,
 506             editable : true,
 507             ownerLayout: me.getComponentLayout(),
 508             minValue: 0,
 509             maxValue: 23,
 510             width: 70,
 511             style : {float:"left"},
 512             enableKeyEvents: true,
 513             listeners: {
 514                  keyup: function(field, e){
 515                      if (field.getValue() > 23){
 516                          e.stopEvent();
 517                          field.setValue(23);
 518                      }
 519                  }
 520              }
 521         });
 522         
 523         me.minute = Ext.create(‘Ext.form.field.Number‘, {
 524             scope: me,
 525             ownerCt: me,
 526             style : {float:"left"},
 527             ownerLayout: me.getComponentLayout(),
 528             minValue: 0,
 529             maxValue: 59,
 530             editable : true,
 531             width: 70,
 532             enableKeyEvents: true,
 533             listeners: {
 534                 keyup: function(field, e){
 535                     if (field.getValue() > 59){
 536                         e.stopEvent();
 537                         field.setValue(59);
 538                     }
 539                 }
 540             }
 541         });
 542         
 543       me.second = Ext.create(‘Ext.form.field.Number‘, {
 544             scope: me,
 545             ownerCt: me,
 546             editable : true,
 547             style : {float:"left"},
 548             ownerLayout: me.getComponentLayout(),
 549             minValue: 0,
 550             maxValue: 59,
 551             width: 70,
 552             enableKeyEvents: true,
 553             listeners: {
 554                 keyup: function(field, e){
 555                     if (field.getValue() > 59){
 556                         e.stopEvent();
 557                         field.setValue(59);
 558                     }
 559                 }
 560             }
 561         });
 562        me.okQueDingBtn = new Ext.button.Button({  
 563             ownerCt: me,  
 564             ownerLayout: me.getComponentLayout(),  
 565             text: me.okText,  
 566             tooltip: me.okTip,  
 567             tooltipType:‘title‘,  
 568             handler:me.okQueDingHandler,//确认按钮的事件委托  
 569             scope: me  
 570         });  
 571         if (me.showToday) {
 572             me.todayBtn = new Ext.button.Button({
 573                 ui: me.footerButtonUI,
 574                 ownerCt: me,
 575                 ownerLayout: me.getComponentLayout(),
 576                 text: Ext.String.format(me.todayText, today),
 577                 tooltip: Ext.String.format(me.todayTip, today),
 578                 tooltipType: ‘title‘,
 579                 tabIndex: -1,
 580                 ariaRole: ‘presentation‘,
 581                 handler: me.selectToday,
 582                 scope: me
 583             });
 584         }
 585 
 586         me.callParent();
 587 
 588         Ext.applyIf(me, {
 589             renderData: {}
 590         });
 591 
 592         Ext.apply(me.renderData, {
 593             dayNames: me.dayNames,
 594             showToday: me.showToday,
 595             prevText: encode(me.prevText),
 596             nextText: encode(me.nextText),
 597             todayText: encode(me.todayText),
 598             ariaMinText: encode(me.ariaMinText),
 599             ariaMaxText: encode(me.ariaMaxText),
 600             ariaDisabledDaysText: encode(me.ariaDisabledDaysText),
 601             ariaDisabledDatesText: encode(me.ariaDisabledDatesText),
 602             days: days
 603         });
 604 
 605         me.protoEl.unselectable();
 606     },
 607 
 608     cacheWidth: function() {
 609         var me = this,
 610             padding = me.parseBox(me.padding),
 611             widthEl = Ext.getBody().createChild({
 612                 cls: me.baseCls + ‘ ‘ + me.borderBoxCls,
 613                 style: ‘position:absolute;top:-1000px;left:-1000px;‘
 614             });
 615 
 616         me.self.prototype.width = widthEl.getWidth() + padding.left + padding.right;
 617         widthEl.destroy();
 618     },
 619 
 620     /**
 621      * @inheritdoc
 622      * @private
 623      */
 624     onRender: function(container, position) {
 625         var me = this;
 626 
 627         me.callParent(arguments);
 628 
 629         me.cells = me.eventEl.select(‘tbody td‘);
 630         me.textNodes = me.eventEl.query(‘tbody td div‘);
 631         
 632         me.eventEl.set({ ‘aria-labelledby‘: me.monthBtn.id });
 633 
 634         me.mon(me.eventEl, {
 635             scope: me,
 636             mousewheel: me.handleMouseWheel,
 637             click: {
 638                 fn: me.handleDateClick,
 639                 delegate: ‘div.‘ + me.baseCls + ‘-date‘
 640             }
 641         });
 642         
 643     },
 644 
 645     /**
 646      * @inheritdoc
 647      * @private
 648      */
 649     initEvents: function(){
 650         var me = this,
 651             pickerField = me.pickerField,
 652             eDate = Ext.Date,
 653             day = eDate.DAY;
 654 
 655         me.callParent();
 656 
 657         // If we‘re part of a date field, don‘t allow us to focus, the field will
 658         // handle that. If we are standalone, then allow the default behaviour
 659         // to occur to receive focus
 660         if (pickerField) {
 661             me.el.on(‘mousedown‘, me.onMouseDown, me);
 662         }
 663 
 664         me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {
 665             handler: me.showPrevMonth,
 666             scope: me,
 667             preventDefault: true,
 668             stopDefault: true
 669         });
 670 
 671         me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
 672             handler: me.showNextMonth,
 673             scope: me,
 674             preventDefault: true,
 675             stopDefault: true
 676         });
 677 
 678         me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({
 679             scope: me,
 680 
 681             left: function(e) {
 682                 if (e.ctrlKey) {
 683                     me.showPrevMonth();
 684                 } else {
 685                     me.update(eDate.add(me.activeDate, day, -1));
 686                 }
 687             },
 688 
 689             right: function(e){
 690                 if (e.ctrlKey) {
 691                     me.showNextMonth();
 692                 } else {
 693                     me.update(eDate.add(me.activeDate, day, 1));
 694                 }
 695             },
 696 
 697             up: function(e) {
 698                 if (e.ctrlKey) {
 699                     me.showNextYear();
 700                 } else {
 701                     me.update(eDate.add(me.activeDate, day, -7));
 702                 }
 703             },
 704 
 705             down: function(e) {
 706                 if (e.ctrlKey) {
 707                     me.showPrevYear();
 708                 } else {
 709                     me.update(eDate.add(me.activeDate, day, 7));
 710                 }
 711             },
 712 
 713             pageUp: function(e) {
 714                 if (e.ctrlKey) {
 715                     me.showPrevYear();
 716                 } else {
 717                     me.showPrevMonth();
 718                 }
 719             },
 720 
 721             pageDown: function(e) {
 722                 if (e.ctrlKey) {
 723                     me.showNextYear();
 724                 } else {
 725                     me.showNextMonth();
 726                 }
 727             },
 728 
 729             tab: function(e) {
 730                 // When the picker is floating and attached to an input field, its
 731                 // ‘select‘ handler will focus the inputEl so when navigation happens
 732                 // it does so as if the input field was focused all the time.
 733                 // This is the desired behavior and we try not to interfere with it
 734                 // in the picker itself, see below.
 735                 me.handleTabClick(e);
 736                 
 737                 // Allow default behaviour of TAB - it MUST be allowed to navigate.
 738                 return true;
 739             },
 740 
 741             enter: function(e) {
 742                 me.handleDateClick(e, me.activeCell.firstChild);
 743             },
 744 
 745             space: function() {
 746                 me.setValue(new Date(me.activeCell.firstChild.dateValue));
 747                 var startValue = me.startValue,
 748                     value = me.value,
 749                     pickerValue;
 750 
 751                 if (pickerField) {
 752                     pickerValue = pickerField.getValue();
 753                     if (pickerValue && startValue && pickerValue.getTime() === value.getTime()) {
 754                         pickerField.setValue(startValue);
 755                     } else {
 756                         pickerField.setValue(value);
 757                     }
 758                 }
 759             },
 760 
 761             home: function(e) {
 762                 me.update(eDate.getFirstDateOfMonth(me.activeDate));
 763             },
 764 
 765             end: function(e) {
 766                 me.update(eDate.getLastDateOfMonth(me.activeDate));
 767             }
 768         }, me.keyNavConfig));
 769 
 770         if (me.disabled) {
 771             me.syncDisabled(true);
 772         }
 773         me.update(me.value);
 774     },
 775 
 776     onMouseDown: function(e) {
 777         e.preventDefault();
 778     },
 779 
 780     handleTabClick: function (e) {
 781         var me = this,
 782             t = me.getSelectedDate(me.activeDate),
 783             handler = me.handler;
 784 
 785         // The following code is like handleDateClick without the e.stopEvent()
 786         if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
 787             me.setValue(new Date(t.dateValue));
 788             me.fireEvent(‘select‘, me, me.value);
 789             if (handler) {
 790                 handler.call(me.scope || me, me, me.value);
 791             }
 792             me.onSelect();
 793         }
 794     },
 795 
 796     getSelectedDate: function (date) {
 797         var me = this,
 798             t = date.getTime(),
 799             cells = me.cells,
 800             cls = me.selectedCls,
 801             cellItems = cells.elements,
 802             cLen = cellItems.length,
 803             cell, c;
 804 
 805         cells.removeCls(cls);
 806 
 807         for (c = 0; c < cLen; c++) {
 808             cell = cellItems[c].firstChild;
 809             if (cell.dateValue === t) {
 810                 return cell;
 811             }
 812         }
 813         return null;
 814     },
 815 
 816     /**
 817      * Setup the disabled dates regex based on config options
 818      * @private
 819      */
 820     initDisabledDays: function() {
 821         var me = this,
 822             dd = me.disabledDates,
 823             re = ‘(?:‘,
 824             len,
 825             d, dLen, dI;
 826 
 827         if(!me.disabledDatesRE && dd){
 828                 len = dd.length - 1;
 829 
 830             dLen = dd.length;
 831 
 832             for (d = 0; d < dLen; d++) {
 833                 dI = dd[d];
 834 
 835                 re += Ext.isDate(dI) ? ‘^‘ + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + ‘$‘ : dI;
 836                 if (d !== len) {
 837                     re += ‘|‘;
 838                 }
 839             }
 840 
 841             me.disabledDatesRE = new RegExp(re + ‘)‘);
 842         }
 843     },
 844 
 845     /**
 846      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
 847      * @param {String[]/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config for
 848      * details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
 849      * @return {Ext.picker.Date} this
 850      */
 851     setDisabledDates: function(dd) {
 852         var me = this;
 853 
 854         if (Ext.isArray(dd)) {
 855             me.disabledDates = dd;
 856             me.disabledDatesRE = null;
 857         } else {
 858             me.disabledDatesRE = dd;
 859         }
 860         me.initDisabledDays();
 861         me.update(me.value, true);
 862         return me;
 863     },
 864 
 865     /**
 866      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
 867      * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details
 868      * on supported values.
 869      * @return {Ext.picker.Date} this
 870      */
 871     setDisabledDays: function(dd) {
 872         this.disabledDays = dd;
 873         return this.update(this.value, true);
 874     },
 875 
 876     /**
 877      * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
 878      * @param {Date} value The minimum date that can be selected
 879      * @return {Ext.picker.Date} this
 880      */
 881     setMinDate: function(dt) {
 882         this.minDate = dt;
 883         return this.update(this.value, true);
 884     },
 885 
 886     /**
 887      * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
 888      * @param {Date} value The maximum date that can be selected
 889      * @return {Ext.picker.Date} this
 890      */
 891     setMaxDate: function(dt) {
 892         this.maxDate = dt;
 893         return this.update(this.value, true);
 894     },
 895 
 896     /**
 897      * Sets the value of the date field
 898      * @param {Date} value The date to set
 899      * @return {Ext.picker.Date} this
 900      */
 901     setValue: function(value) {
 902         // If passed a null value just pass in a new date object.
 903         this.value = Ext.Date.clearTime(value || new Date(), true);
 904         return this.update(this.value);
 905     },
 906 
 907     /**
 908      * Gets the current selected value of the date field
 909      * @return {Date} The selected date
 910      */
 911     getValue: function() {
 912         return this.value;
 913     },
 914 
 915     //<locale type="function">
 916     /**
 917      * Gets a single character to represent the day of the week
 918      * @return {String} The character
 919      */
 920     getDayInitial: function(value) {
 921         return value.substr(0,1);
 922     },
 923     //</locale>
 924 
 925     /**
 926      * @inheritdoc
 927      * @private
 928      */
 929     onEnable: function() {
 930         var me = this;
 931 
 932         me.callParent();
 933         me.syncDisabled(false);
 934         me.update(me.activeDate);
 935 
 936     },
 937 
 938     /**
 939      * @inheritdoc
 940      * @private
 941      */
 942     onShow: function() {
 943         var me = this;
 944 
 945         me.callParent();
 946         me.syncDisabled(false);
 947         if (me.pickerField) {
 948             me.startValue = me.pickerField.getValue();
 949         }
 950     },
 951     
 952     /**
 953      * @inheritdoc
 954      * @private
 955      */
 956     onHide: function() {
 957         this.callParent();
 958         this.syncDisabled(true);
 959     },
 960 
 961     /**
 962      * @inheritdoc
 963      * @private
 964      */
 965     onDisable: function() {
 966         this.callParent();
 967         this.syncDisabled(true);
 968     },
 969 
 970     /**
 971      * Get the current active date.
 972      * @private
 973      * @return {Date} The active date
 974      */
 975     getActive: function(){
 976         return this.activeDate || this.value;
 977     },
 978 
 979     /**
 980      * Run any animation required to hide/show the month picker.
 981      * @private
 982      * @param {Boolean} isHide True if it‘s a hide operation
 983      */
 984     runAnimation: function(isHide){
 985         var picker = this.monthPicker,
 986             options = {
 987                 duration: 200,
 988                 callback: function() {
 989                     picker.setVisible(!isHide);
 990                 }
 991             };
 992 
 993         if (isHide) {
 994             picker.el.slideOut(‘t‘, options);
 995         } else {
 996             picker.el.slideIn(‘t‘, options);
 997         }
 998     },
 999 
1000     /**
1001      * Hides the month picker, if it‘s visible.
1002      * @param {Boolean} [animate] Indicates whether to animate this action. If the animate
1003      * parameter is not specified, the behavior will use {@link #disableAnim} to determine
1004      * whether to animate or not.
1005      * @return {Ext.picker.Date} this
1006      */
1007     hideMonthPicker: function(animate){
1008         var me = this,
1009             picker = me.monthPicker;
1010 
1011         if (picker && picker.isVisible()) {
1012             if (me.shouldAnimate(animate)) {
1013                 me.runAnimation(true);
1014             } else {
1015                 picker.hide();
1016             }
1017         }
1018         return me;
1019     },
1020     
1021     doShowMonthPicker: function(){
1022         // Wrap in an extra call so we can prevent the button
1023         // being passed as an animation parameter.
1024         this.showMonthPicker();
1025     },
1026     
1027     doHideMonthPicker: function() {
1028         // Wrap in an extra call so we can prevent this
1029         // being passed as an animation parameter
1030         this.hideMonthPicker();
1031     },
1032 
1033     /**
1034      * Show the month picker
1035      * @param {Boolean} [animate] Indicates whether to animate this action. If the animate
1036      * parameter is not specified, the behavior will use {@link #disableAnim} to determine
1037      * whether to animate or not.
1038      * @return {Ext.picker.Date} this
1039      */
1040     showMonthPicker: function(animate) {
1041         var me = this,
1042             el = me.el,
1043             picker;
1044         
1045         if (me.rendered && !me.disabled) {
1046             picker = me.createMonthPicker();            
1047             if (!picker.isVisible()) {
1048                 picker.setValue(me.getActive());
1049                 picker.setSize(el.getSize());
1050 
1051                 // Null out floatParent so that the [-1, -1] position is not made relative to this
1052                 picker.floatParent = null;
1053                 picker.setPosition(-el.getBorderWidth(‘l‘), -el.getBorderWidth(‘t‘));
1054                 if (me.shouldAnimate(animate)) {
1055                     me.runAnimation(false);
1056                 } else {
1057                     picker.show();
1058                 }
1059             }
1060         }
1061         return me;
1062     },
1063     
1064     /**
1065      * Checks whether a hide/show action should animate
1066      * @private
1067      * @param {Boolean} [animate] A possible animation value
1068      * @return {Boolean} Whether to animate the action
1069      */
1070     shouldAnimate: function(animate) {
1071         return Ext.isDefined(animate) ? animate : !this.disableAnim;
1072     },
1073 
1074     /**
1075      * Create the month picker instance
1076      * @private
1077      * @return {Ext.picker.Month} picker
1078      */
1079     createMonthPicker: function() {
1080         var me = this,
1081             picker = me.monthPicker;
1082 
1083         if (!picker) {
1084             me.monthPicker = picker = new Ext.picker.Month({
1085                 renderTo: me.el,
1086                 // We need to set the ownerCmp so that owns() can correctly
1087                 // match up the component hierarchy so that focus does not leave
1088                 // an owning picker field if/when this gets focus.
1089                 ownerCmp: me,
1090                 floating: true,
1091                 padding: me.padding,
1092                 shadow: false,
1093                 small: me.showToday === false,
1094                 footerButtonUI: me.footerButtonUI,
1095                 listeners: {
1096                     scope: me,
1097                     cancelclick: me.onCancelClick,
1098                     okclick: me.onOkClick,
1099                     yeardblclick: me.onOkClick,
1100                     monthdblclick: me.onOkClick
1101                 }
1102             });
1103             if (!me.disableAnim) {
1104                 // hide the element if we‘re animating to prevent an initial flicker
1105                 picker.el.setStyle(‘display‘, ‘none‘);
1106             }
1107             picker.hide();
1108             me.on(‘beforehide‘, me.doHideMonthPicker, me);
1109         }
1110         return picker;
1111     },
1112 
1113     /**
1114      * Respond to an ok click on the month picker
1115      * @private
1116      */
1117     onOkClick: function(picker, value) {
1118         var me = this,
1119             month = value[0],
1120             year = value[1],
1121             date = new Date(year, month, me.getActive().getDate());
1122 
1123         if (date.getMonth() !== month) {
1124             // ‘fix‘ the JS rolling date conversion if needed
1125             date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
1126         }
1127         me.setValue(date);
1128         me.hideMonthPicker();
1129     },
1130 
1131     /**
1132      * Respond to a cancel click on the month picker
1133      * @private
1134      */
1135     onCancelClick: function() {
1136         this.selectedUpdate(this.activeDate);
1137         this.hideMonthPicker();
1138     },
1139 
1140     /**
1141      * Show the previous month.
1142      * @param {Object} e
1143      * @return {Ext.picker.Date} this
1144      */
1145     showPrevMonth: function(e) {
1146         return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
1147     },
1148 
1149     /**
1150      * Show the next month.
1151      * @param {Object} e
1152      * @return {Ext.picker.Date} this
1153      */
1154     showNextMonth: function(e) {
1155         return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
1156     },
1157 
1158     /**
1159      * Show the previous year.
1160      * @return {Ext.picker.Date} this
1161      */
1162     showPrevYear: function() {
1163         return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
1164     },
1165 
1166     /**
1167      * Show the next year.
1168      * @return {Ext.picker.Date} this
1169      */
1170     showNextYear: function() {
1171         return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
1172     },
1173 
1174     /**
1175      * Respond to the mouse wheel event
1176      * @private
1177      * @param {Ext.event.Event} e
1178      */
1179     handleMouseWheel: function(e) {
1180         e.stopEvent();
1181         if(!this.disabled){
1182             var delta = e.getWheelDelta();
1183             if(delta > 0){
1184                 this.showPrevMonth();
1185             } else if(delta < 0){
1186                 this.showNextMonth();
1187             }
1188         }
1189     },
1190 
1191     /**
1192      * Respond to a date being clicked in the picker
1193      * @private
1194      * @param {Ext.event.Event} e
1195      * @param {HTMLElement} t
1196      */
1197     handleDateClick: function(e, t) {
1198         var me = this,
1199             handler = me.handler;
1200 
1201         e.stopEvent();
1202         if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
1203             me.setValue(new Date(t.dateValue));
1204             me.fireEvent(‘select‘, me, me.value);
1205             if (handler) {
1206                 handler.call(me.scope || me, me, me.value);
1207             }
1208             // event handling is turned off on hide
1209             // when we are using the picker in a field
1210             // therefore onSelect comes AFTER the select
1211             // event.
1212             me.onSelect();
1213         }
1214     },
1215 
1216     /**
1217      * Perform any post-select actions
1218      * @private
1219      */
1220     onSelect: function() {
1221         if (this.hideOnSelect) {
1222              this.hide();
1223          }
1224     },
1225 
1226     /**
1227      * Sets the current value to today.
1228      * @return {Ext.picker.Date} this
1229      */
1230     selectToday: function() {
1231         var me = this,
1232             btn = me.todayBtn,
1233             handler = me.handler;
1234 
1235         if (btn && !btn.disabled) {
1236             me.setValue(Ext.Date.clearTime(new Date()));
1237             me.fireEvent(‘select‘, me, me.value);
1238             if (handler) {
1239                 handler.call(me.scope || me, me, me.value);
1240             }
1241             me.onSelect();
1242         }
1243         return me;
1244     },
1245 
1246     /**
1247      * Update the selected cell
1248      * @private
1249      * @param {Date} date The new date
1250      */
1251     selectedUpdate: function(date) {
1252         var me        = this,
1253             t         = date.getTime(),
1254             cells     = me.cells,
1255             cls       = me.selectedCls,
1256             c,
1257             cLen      = cells.getCount(),
1258             cell;
1259         
1260         me.eventEl.dom.setAttribute(‘aria-busy‘, ‘true‘);
1261         
1262         cell = me.activeCell;
1263         
1264         if (cell) {
1265             Ext.fly(cell).removeCls(cls);
1266             cell.setAttribute(‘aria-selected‘, false);
1267         }
1268 
1269         for (c = 0; c < cLen; c++) {
1270             cell = cells.item(c);
1271 
1272             if (me.textNodes[c].dateValue === t) {
1273                 me.activeCell = cell.dom;
1274                 me.eventEl.dom.setAttribute(‘aria-activedescendant‘, cell.dom.id);
1275                 cell.dom.setAttribute(‘aria-selected‘, true);
1276                 cell.addCls(cls);
1277                 me.fireEvent(‘highlightitem‘, me, cell);
1278                 break;
1279             }
1280         }
1281         
1282         me.eventEl.dom.removeAttribute(‘aria-busy‘);
1283     },
1284 
1285     /**
1286      * Update the contents of the picker for a new month
1287      * @private
1288      * @param {Date} date The new date
1289      */
1290     fullUpdate: function(date) {
1291         var me = this,
1292             cells = me.cells.elements,
1293             textNodes = me.textNodes,
1294             disabledCls = me.disabledCellCls,
1295             eDate = Ext.Date,
1296             i = 0,
1297             extraDays = 0,
1298             newDate = +eDate.clearTime(date, true),
1299             today = +eDate.clearTime(new Date()),
1300             min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
1301             max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
1302             ddMatch = me.disabledDatesRE,
1303             ddText = me.disabledDatesText,
1304             ddays = me.disabledDays ? me.disabledDays.join(‘‘) : false,
1305             ddaysText = me.disabledDaysText,
1306             format = me.format,
1307             days = eDate.getDaysInMonth(date),
1308             firstOfMonth = eDate.getFirstDateOfMonth(date),
1309             startingPos = firstOfMonth.getDay() - me.startDay,
1310             previousMonth = eDate.add(date, eDate.MONTH, -1),
1311             ariaTitleDateFormat = me.ariaTitleDateFormat,
1312             prevStart, current, disableToday, tempDate, setCellClass, html, cls,
1313             formatValue, value;
1314 
1315         if (startingPos < 0) {
1316             startingPos += 7;
1317         }
1318 
1319         days += startingPos;
1320         prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
1321         current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);
1322 
1323         if (me.showToday) {
1324             tempDate = eDate.clearTime(new Date());
1325             disableToday = (tempDate < min || tempDate > max ||
1326                 (ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
1327                 (ddays && ddays.indexOf(tempDate.getDay()) !== -1));
1328 
1329             if (!me.disabled) {
1330                 me.todayBtn.setDisabled(disableToday);
1331             }
1332         }
1333 
1334         setCellClass = function(cellIndex, cls){
1335             var cell = cells[cellIndex],
1336                 describedBy = [];
1337             
1338             // Cells are not rendered with ids
1339             if (!cell.hasAttribute(‘id‘)) {
1340                 cell.setAttribute(‘id‘, me.id + ‘-cell-‘ + cellIndex);
1341             }
1342             
1343             // store dateValue number as an expando
1344             value = +eDate.clearTime(current, true);
1345             cell.firstChild.dateValue = value;
1346             
1347             cell.setAttribute(‘aria-label‘, eDate.format(current, ariaTitleDateFormat));
1348             
1349             // Here and below we can‘t use title attribute instead of data-qtip
1350             // because JAWS will announce title value before cell content
1351             // which is not what we need. Also we are using aria-describedby attribute
1352             // and not placing the text in aria-label because some cells may have
1353             // compound descriptions (like Today and Disabled day).
1354             cell.removeAttribute(‘aria-describedby‘);
1355             cell.removeAttribute(‘data-qtip‘);
1356             
1357             if (value === today) {
1358                 cls += ‘ ‘ + me.todayCls;
1359                 describedBy.push(me.id + ‘-todayText‘);
1360             }
1361             
1362             if (value === newDate) {
1363                 me.activeCell = cell;
1364                 me.eventEl.dom.setAttribute(‘aria-activedescendant‘, cell.id);
1365                 cell.setAttribute(‘aria-selected‘, true);
1366                 cls += ‘ ‘ + me.selectedCls;
1367                 me.fireEvent(‘highlightitem‘, me, cell);
1368             }
1369             else {
1370                 cell.setAttribute(‘aria-selected‘, false);
1371             }
1372 
1373             if (value < min) {
1374                 cls += ‘ ‘ + disabledCls;
1375                 describedBy.push(me.id + ‘-ariaMinText‘);
1376                 cell.setAttribute(‘data-qtip‘, me.minText);
1377             }
1378             else if (value > max) {
1379                 cls += ‘ ‘ + disabledCls;
1380                 describedBy.push(me.id + ‘-ariaMaxText‘);
1381                 cell.setAttribute(‘data-qtip‘, me.maxText);
1382             }
1383             else if (ddays && ddays.indexOf(current.getDay()) !== -1){
1384                 cell.setAttribute(‘data-qtip‘, ddaysText);
1385                 describedBy.push(me.id + ‘-ariaDisabledDaysText‘);
1386                 cls += ‘ ‘ + disabledCls;
1387             }
1388             else if (ddMatch && format){
1389                 formatValue = eDate.dateFormat(current, format);
1390                 if(ddMatch.test(formatValue)){
1391                     cell.setAttribute(‘data-qtip‘, ddText.replace(‘%0‘, formatValue));
1392                     describedBy.push(me.id + ‘-ariaDisabledDatesText‘);
1393                     cls += ‘ ‘ + disabledCls;
1394                 }
1395             }
1396             
1397             if (describedBy.length) {
1398                 cell.setAttribute(‘aria-describedby‘, describedBy.join(‘ ‘));
1399             }
1400             
1401             cell.className = cls + ‘ ‘ + me.cellCls;
1402         };
1403         
1404         me.eventEl.dom.setAttribute(‘aria-busy‘, ‘true‘);
1405 
1406         for (; i < me.numDays; ++i) {
1407             if (i < startingPos) {
1408                 html = (++prevStart);
1409                 cls = me.prevCls;
1410             } else if (i >= days) {
1411                 html = (++extraDays);
1412                 cls = me.nextCls;
1413             } else {
1414                 html = i - startingPos + 1;
1415                 cls = me.activeCls;
1416             }
1417             textNodes[i].innerHTML = html;
1418             current.setDate(current.getDate() + 1);
1419             setCellClass(i, cls);
1420         }
1421         
1422         me.eventEl.dom.removeAttribute(‘aria-busy‘);
1423 
1424         me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));
1425     },
1426 
1427     /**
1428      * Update the contents of the picker
1429      * @private
1430      * @param {Date} date The new date
1431      * @param {Boolean} forceRefresh True to force a full refresh
1432      */
1433     update: function(date, forceRefresh) {
1434         var me = this,
1435             active = me.activeDate;
1436         //添加时间相关
1437         date.setHours(me.hour.getValue());
1438         date.setMinutes(me.minute.getValue());
1439         date.setSeconds(me.second.getValue());
1440         
1441         if (me.rendered) {
1442             me.activeDate = date;
1443             if (!forceRefresh && active && me.el &&
1444                     active.getMonth() === date.getMonth() &&
1445                     active.getFullYear() === date.getFullYear()) {
1446                 me.selectedUpdate(date, active);
1447             } else {
1448                 me.fullUpdate(date, active);
1449             }
1450         }
1451         return me;
1452     },
1453    /** 
1454      * 确认 按钮触发的调用 
1455      */  
1456     okQueDingHandler : function(){  
1457         var me = this,  
1458             btn = me.okQueDingBtn;  
1459   
1460         if(btn && !btn.disabled){  
1461             me.setValue(this.getValue());  
1462             me.fireEvent(‘select‘, me, me.value);  
1463             me.onSelect();  
1464         }  
1465         return me;  
1466     },  
1467     /**
1468      * @private
1469      * @inheritdoc
1470      */
1471     beforeDestroy: function() {
1472         var me = this;
1473 
1474         if (me.rendered) {
1475             Ext.destroy(
1476                 me.keyNav,
1477                 me.monthPicker,
1478                 me.monthBtn,
1479                 me.nextRepeater,
1480                 me.prevRepeater,
1481                 me.todayBtn,
1482                 me.okQueDingBtn,
1483                 me.todayElSpan
1484             );
1485             delete me.textNodes;
1486             delete me.cells.elements;
1487         }
1488         me.callParent();
1489     },
1490 
1491     privates: {
1492         // Do the job of a container layout at this point even though we are not a Container.
1493         // TODO: Refactor as a Container.
1494         finishRenderChildren: function () {
1495             var me = this;
1496 
1497             me.callParent();
1498             me.monthBtn.finishRender();
1499             me.okQueDingBtn.finishRender();  
1500             if (me.showToday) {
1501                 me.todayBtn.finishRender();
1502             }
1503             //添加时间相关
1504             this.hour.finishRender();
1505             this.minute.finishRender();
1506             this.second.finishRender();
1507         },
1508         
1509         getFocusEl: function() {
1510             return this.eventEl;
1511         },
1512 
1513         /**
1514          * Set the disabled state of various internal components
1515          * @param {Boolean} disabled
1516          * @private
1517          */
1518         syncDisabled: function (disabled) {
1519             var me = this,
1520                 keyNav = me.keyNav;
1521 
1522             // If we have one, we have all
1523             if (keyNav) {
1524                 keyNav.setDisabled(disabled);
1525                 me.prevRepeater.setDisabled(disabled);
1526                 me.nextRepeater.setDisabled(disabled);
1527                 if (me.todayBtn) {
1528                     me.todayBtn.setDisabled(disabled);
1529                 }
1530             }
1531         }
1532     }
1533 });

  1 /**
  2  * @docauthor Jason Johnston <jason@sencha.com>
  3  *
  4  * Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
  5  * validation.
  6  *
  7  * This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
  8  * it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
  9  * configs. These may be reconfigured to use date formats appropriate for the user‘s locale.
 10  *
 11  * The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
 12  * {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
 13  * in the field‘s validation, and in the date picker dropdown by preventing invalid dates from being selected.
 14  *
 15  * # Example usage
 16  *
 17  *     @example
 18  *     Ext.create(‘Ext.form.Panel‘, {
 19  *         renderTo: Ext.getBody(),
 20  *         width: 300,
 21  *         bodyPadding: 10,
 22  *         title: ‘Dates‘,
 23  *         items: [{
 24  *             xtype: ‘datefield‘,
 25  *             anchor: ‘100%‘,
 26  *             fieldLabel: ‘From‘,
 27  *             name: ‘from_date‘,
 28  *             maxValue: new Date()  // limited to the current date or prior
 29  *         }, {
 30  *             xtype: ‘datefield‘,
 31  *             anchor: ‘100%‘,
 32  *             fieldLabel: ‘To‘,
 33  *             name: ‘to_date‘,
 34  *             value: new Date()  // defaults to today
 35  *         }]
 36  *     });
 37  *
 38  * # Date Formats Examples
 39  *
 40  * This example shows a couple of different date format parsing scenarios. Both use custom date format
 41  * configurations; the first one matches the configured `format` while the second matches the `altFormats`.
 42  *
 43  *     @example
 44  *     Ext.create(‘Ext.form.Panel‘, {
 45  *         renderTo: Ext.getBody(),
 46  *         width: 300,
 47  *         bodyPadding: 10,
 48  *         title: ‘Dates‘,
 49  *         items: [{
 50  *             xtype: ‘datefield‘,
 51  *             anchor: ‘100%‘,
 52  *             fieldLabel: ‘Date‘,
 53  *             name: ‘date‘,
 54  *             // The value matches the format; will be parsed and displayed using that format.
 55  *             format: ‘m d Y‘,
 56  *             value: ‘2 4 1978‘
 57  *         }, {
 58  *             xtype: ‘datefield‘,
 59  *             anchor: ‘100%‘,
 60  *             fieldLabel: ‘Date‘,
 61  *             name: ‘date‘,
 62  *             // The value does not match the format, but does match an altFormat; will be parsed
 63  *             // using the altFormat and displayed using the format.
 64  *             format: ‘m d Y‘,
 65  *             altFormats: ‘m,d,Y|m.d.Y‘,
 66  *             value: ‘2.4.1978‘
 67  *         }]
 68  *     });
 69  */
 70 Ext.define(‘Ext.ux.DateTimeField‘, {
 71     extend:‘Ext.form.field.Picker‘,
 72     alias: ‘widget.datetimefield‘,
 73     requires: [‘Ext.ux.DateTimePicker‘],
 74 
 75     //<locale>
 76     /**
 77      * @cfg {String} format
 78      * The default date format string which can be overriden for localization support. The format must be valid
 79      * according to {@link Ext.Date#parse}.
 80      */
 81     format : "m/d/Y",
 82     //</locale>
 83     //<locale>
 84     /**
 85      * @cfg {String} altFormats
 86      * Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
 87      * format.
 88      */
 89     altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
 90     //</locale>
 91     //<locale>
 92     /**
 93      * @cfg {String} disabledDaysText
 94      * The tooltip to display when the date falls on a disabled day.
 95      */
 96     disabledDaysText : "Disabled",
 97     //</locale>
 98     //<locale>
 99     /**
100      * @cfg {String} disabledDatesText
101      * The tooltip text to display when the date falls on a disabled date.
102      */
103     disabledDatesText : "Disabled",
104     //</locale>
105     //<locale>
106     /**
107      * @cfg {String} minText
108      * The error text to display when the date in the cell is before {@link #minValue}.
109      */
110     minText : "The date in this field must be equal to or after {0}",
111     //</locale>
112     //<locale>
113     /**
114      * @cfg {String} maxText
115      * The error text to display when the date in the cell is after {@link #maxValue}.
116      */
117     maxText : "The date in this field must be equal to or before {0}",
118     //</locale>
119     //<locale>
120     /**
121      * @cfg {String} invalidText
122      * The error text to display when the date in the field is invalid.
123      */
124     invalidText : "{0} is not a valid date - it must be in the format {1}",
125     //</locale>
126     /**
127      * @cfg {String} [triggerCls=‘x-form-date-trigger‘]
128      * An additional CSS class used to style the trigger button. The trigger will always get the class ‘x-form-trigger‘
129      * and triggerCls will be **appended** if specified (default class displays a calendar icon).
130      */
131     triggerCls : Ext.baseCSSPrefix + ‘form-date-trigger‘,
132     /**
133      * @cfg {Boolean} showToday
134      * false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for
135      * spacebar that selects the current date.
136      */
137     showToday : true,
138     /**
139      * @cfg {Date/String} minValue
140      * The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
141      */
142     /**
143      * @cfg {Date/String} maxValue
144      * The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
145      */
146     /**
147      * @cfg {Number[]} disabledDays
148      * An array of days to disable, 0 based. Some examples:
149      *
150      *     // disable Sunday and Saturday:
151      *     disabledDays:  [0, 6]
152      *     // disable weekdays:
153      *     disabledDays: [1,2,3,4,5]
154      */
155     /**
156      * @cfg {String[]} disabledDates
157      * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so
158      * they are very powerful. Some examples:
159      *
160      *     // disable these exact dates:
161      *     disabledDates: ["03/08/2003", "09/16/2003"]
162      *     // disable these days for every year:
163      *     disabledDates: ["03/08", "09/16"]
164      *     // only match the beginning (useful if you are using short years):
165      *     disabledDates: ["^03/08"]
166      *     // disable every day in March 2006:
167      *     disabledDates: ["03/../2006"]
168      *     // disable every day in every March:
169      *     disabledDates: ["^03"]
170      *
171      * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
172      * to support regular expressions, if you are using a {@link #format date format} that has "." in it, you will have
173      * to escape the dot when restricting dates. For example: `["03\\.08\\.03"]`.
174      */
175 
176     /**
177      * @cfg {String} submitFormat
178      * The date format string which will be submitted to the server. The format must be valid according to
179      * {@link Ext.Date#parse}.
180      *
181      * Defaults to {@link #format}.
182      */
183 
184     /**
185      * @cfg {Boolean} useStrict
186      * True to enforce strict date parsing to prevent the default Javascript "date rollover".
187      * Defaults to the useStrict parameter set on Ext.Date
188      * See {@link Ext.Date#parse}.
189      */
190     useStrict: undefined,
191 
192     // in the absence of a time value, a default value of 12 noon will be used
193     // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
194     initTime: ‘12‘, // 24 hour format
195 
196     initTimeFormat: ‘H‘,
197 
198     matchFieldWidth: false,
199     //<locale>
200     /**
201      * @cfg {Number} [startDay=undefined]
202      * Day index at which the week should begin, 0-based.
203      *
204      * Defaults to `0` (Sunday).
205      */
206     startDay: 0,
207     //</locale>
208 
209     /**
210      * @inheritdoc
211      */
212     valuePublishEvent: [‘select‘, ‘blur‘],
213 
214     initComponent : function(){
215         var me = this,
216             isString = Ext.isString,
217             min, max;
218 
219         min = me.minValue;
220         max = me.maxValue;
221         if(isString(min)){
222             me.minValue = me.parseDate(min);
223         }
224         if(isString(max)){
225             me.maxValue = me.parseDate(max);
226         }
227         me.disabledDatesRE = null;
228         me.initDisabledDays();
229 
230         me.callParent();
231     },
232 
233     initValue: function() {
234         var me = this,
235             value = me.value;
236 
237         // If a String value was supplied, try to convert it to a proper Date
238         if (Ext.isString(value)) {
239             me.value = me.rawToValue(value);
240         }
241 
242         me.callParent();
243     },
244 
245     // private
246     initDisabledDays : function(){
247         if(this.disabledDates){
248             var dd   = this.disabledDates,
249                 len  = dd.length - 1,
250                 re   = "(?:",
251                 d,
252                 dLen = dd.length,
253                 date;
254 
255             for (d = 0; d < dLen; d++) {
256                 date = dd[d];
257 
258                 re += Ext.isDate(date) ? ‘^‘ + Ext.String.escapeRegex(date.dateFormat(this.format)) + ‘$‘ : date;
259                 if (d !== len) {
260                     re += ‘|‘;
261                 }
262             }
263 
264             this.disabledDatesRE = new RegExp(re + ‘)‘);
265         }
266     },
267 
268     /**
269      * Replaces any existing disabled dates with new values and refreshes the Date picker.
270      * @param {String[]} disabledDates An array of date strings (see the {@link #disabledDates} config for details on
271      * supported values) used to disable a pattern of dates.
272      */
273     setDisabledDates : function(disabledDates){
274         var me = this,
275             picker = me.picker;
276 
277         me.disabledDates = disabledDates;
278         me.initDisabledDays();
279         if (picker) {
280             picker.setDisabledDates(me.disabledDatesRE);
281         }
282     },
283 
284     /**
285      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
286      * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details on
287      * supported values.
288      */
289     setDisabledDays : function(disabledDays){
290         var picker = this.picker;
291 
292         this.disabledDays = disabledDays;
293         if (picker) {
294             picker.setDisabledDays(disabledDays);
295         }
296     },
297 
298     /**
299      * Replaces any existing {@link #minValue} with the new value and refreshes the Date picker.
300      * @param {Date} value The minimum date that can be selected
301      */
302     setMinValue : function(value){
303         var me = this,
304             picker = me.picker,
305             minValue = (Ext.isString(value) ? me.parseDate(value) : value);
306 
307         me.minValue = minValue;
308         if (picker) {
309             picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
310             picker.setMinDate(minValue);
311         }
312     },
313 
314     /**
315      * Replaces any existing {@link #maxValue} with the new value and refreshes the Date picker.
316      * @param {Date} value The maximum date that can be selected
317      */
318     setMaxValue : function(value){
319         var me = this,
320             picker = me.picker,
321             maxValue = (Ext.isString(value) ? me.parseDate(value) : value);
322 
323         me.maxValue = maxValue;
324         if (picker) {
325             picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
326             picker.setMaxDate(maxValue);
327         }
328     },
329 
330     /**
331      * Runs all of Date‘s validations and returns an array of any errors. Note that this first runs Text‘s validations,
332      * so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
333      * the date format is valid, that the chosen date is within the min and max date constraints set, that the date
334      * chosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.
335      * @param {Object} [value] The value to get errors for (defaults to the current field value)
336      * @return {String[]} All validation errors for this field
337      */
338     getErrors: function(value) {
339         value = arguments.length > 0 ? value : this.formatDate(this.processRawValue(this.getRawValue()));
340 
341         var me = this,
342             format = Ext.String.format,
343             clearTime = Ext.Date.clearTime,
344             errors = me.callParent([value]),
345             disabledDays = me.disabledDays,
346             disabledDatesRE = me.disabledDatesRE,
347             minValue = me.minValue,
348             maxValue = me.maxValue,
349             len = disabledDays ? disabledDays.length : 0,
350             i = 0,
351             svalue,
352             fvalue,
353             day,
354             time;
355 
356         
357 
358         if (value === null || value.length < 1) { // if it‘s blank and textfield didn‘t flag it then it‘s valid
359              return errors;
360         }
361 
362         svalue = value;
363         value = me.parseDate(value);
364         if (!value) {
365             errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
366             return errors;
367         }
368 
369         time = value.getTime();
370         if (minValue && time < clearTime(minValue).getTime()) {
371             errors.push(format(me.minText, me.formatDate(minValue)));
372         }
373 
374         if (maxValue && time > clearTime(maxValue).getTime()) {
375             errors.push(format(me.maxText, me.formatDate(maxValue)));
376         }
377 
378         if (disabledDays) {
379             day = value.getDay();
380 
381             for(; i < len; i++) {
382                 if (day === disabledDays[i]) {
383                     errors.push(me.disabledDaysText);
384                     break;
385                 }
386             }
387         }
388 
389         fvalue = me.formatDate(value);
390         if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
391             errors.push(format(me.disabledDatesText, fvalue));
392         }
393 
394         return errors;
395     },
396 
397     rawToValue: function(rawValue) {
398         return this.parseDate(rawValue) || rawValue || null;
399     },
400 
401     valueToRaw: function(value) {
402         return this.formatDate(this.parseDate(value));
403     },
404 
405     /**
406      * @method setValue
407      * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,
408      * using {@link #format} as the date format, according to the same rules as {@link Ext.Date#parse} (the default
409      * format used is "m/d/Y").
410      *
411      * Usage:
412      *
413      *     //All of these calls set the same date value (May 4, 2006)
414      *
415      *     //Pass a date object:
416      *     var dt = new Date(‘5/4/2006‘);
417      *     dateField.setValue(dt);
418      *
419      *     //Pass a date string (default format):
420      *     dateField.setValue(‘05/04/2006‘);
421      *
422      *     //Pass a date string (custom format):
423      *     dateField.format = ‘Y-m-d‘;
424      *     dateField.setValue(‘2006-05-04‘);
425      *
426      * @param {String/Date} date The date or valid date string
427      * @return {Ext.form.field.Date} this
428      */
429 
430     /**
431      * Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
432      * @param {String} value The value to attempt to parse
433      * @param {String} format A valid date format (see {@link Ext.Date#parse})
434      * @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
435      */
436     safeParse : function(value, format) {
437         var me = this,
438             utilDate = Ext.Date,
439             result = null,
440             strict = me.useStrict,
441             parsedDate;
442 
443         if (utilDate.formatContainsHourInfo(format)) {
444             // if parse format contains hour information, no DST adjustment is necessary
445             result = utilDate.parse(value, format, strict);
446         } else {
447             // set time to 12 noon, then clear the time
448             parsedDate = utilDate.parse(value + ‘ ‘ + me.initTime, format + ‘ ‘ + me.initTimeFormat, strict);
449             if (parsedDate) {
450                 result = utilDate.clearTime(parsedDate);
451             }
452         }
453         return result;
454     },
455 
456     // @private
457     getSubmitValue: function() {
458         var format = this.submitFormat || this.format,
459             value = this.getValue();
460 
461         return value ? Ext.Date.format(value, format) : ‘‘;
462     },
463 
464     /**
465      * @private
466      */
467     parseDate : function(value) {
468         if(!value || Ext.isDate(value)){
469             return value;
470         }
471 
472         var me = this,
473             val = me.safeParse(value, me.format),
474             altFormats = me.altFormats,
475             altFormatsArray = me.altFormatsArray,
476             i = 0,
477             len;
478 
479         if (!val && altFormats) {
480             altFormatsArray = altFormatsArray || altFormats.split(‘|‘);
481             len = altFormatsArray.length;
482             for (; i < len && !val; ++i) {
483                 val = me.safeParse(value, altFormatsArray[i]);
484             }
485         }
486         return val;
487     },
488 
489     // private
490     formatDate: function(date){
491         return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
492     },
493 
494     createPicker: function() {
495         var me = this,
496             format = Ext.String.format;
497 
498         // Create floating Picker BoundList. It will acquire a floatParent by looking up
499         // its ancestor hierarchy (Pickers use their pickerField property as an upward link)
500         // for a floating component.
501         return new Ext.ux.DateTimePicker({
502             pickerField: me,
503             floating: true,
504             focusable: false, // Key events are listened from the input field which is never blurred
505             hidden: true,
506             minDate: me.minValue,
507             maxDate: me.maxValue,
508             disabledDatesRE: me.disabledDatesRE,
509             disabledDatesText: me.disabledDatesText,
510             disabledDays: me.disabledDays,
511             disabledDaysText: me.disabledDaysText,
512             format: me.format,
513             showToday: me.showToday,
514             startDay: me.startDay,
515             minText: format(me.minText, me.formatDate(me.minValue)),
516             maxText: format(me.maxText, me.formatDate(me.maxValue)),
517             listeners: {
518                 scope: me,
519                 select: me.onSelect
520             },
521             keyNavConfig: {
522                 esc: function() {
523                     me.collapse();
524                 }
525             }
526         });
527     },
528 
529     onSelect: function(m, d) {
530         var me = this;
531 
532         me.setValue(d);
533         me.fireEvent(‘select‘, me, d);
534         me.collapse();
535     },
536 
537     /**
538      * @private
539      * Sets the Date picker‘s value to match the current field value when expanding.
540      */
541     onExpand: function() {
542         var me = this,
543             value = me.getValue() instanceof Date ? me.getValue() : new Date();
544         me.picker.setValue(value);     
545         me.picker.hour.setValue(value.getHours());
546         me.picker.minute.setValue(value.getMinutes());
547         me.picker.second.setValue(value.getSeconds());
548     },
549 
550     // private
551     onBlur: function(e) {
552         var me = this,
553             v = me.rawToValue(me.getRawValue());
554 
555         if (Ext.isDate(v)) {
556             me.setValue(v);
557         }
558         me.callParent([e]);
559     }
560 
561     /**
562      * @cfg {Boolean} grow
563      * @private
564      */
565     /**
566      * @cfg {Number} growMin
567      * @private
568      */
569     /**
570      * @cfg {Number} growMax
571      * @private
572      */
573     /**
574      * @method autoSize
575      * @private
576      */
577 });