Extjs4 date + hour/minute/second component datetimefield

The latest Ext-4.2.1.883 version provides date components xtype: 'datefield ') and time component xtype: 'timefield'), but does not provide date + hour/second components.

Paste the code of the searched cool extension component:

1. Extend the date selector datepicker component to the datetimepicker:

Ext. define ('myapp. ux. dateTimePicker ', {extend: 'ext. picker. date', alias: 'widget. datetimepicker ', todayText:' ', timeLabel: 'time', requires: ['myapp. ux. timePickerField '], initComponent: function () {// keep time part for value var value = this. value | new Date (); this. callParent (); this. value = value ;}, onRender: function (container, position) {if (! This. timefield) {this. timefield = Ext. create ('myapp. ux. timePickerField ', {fieldLabel: this. timeLabel, labelWidth: 40, value: Ext. date. format (this. value, 'H: I: s')});} this. timefield. ownerCt = this; this. timefield. on ('change', this. timeChange, this); this. callParent (arguments); var table = Ext. get (Ext. domQuery. selectNode ('table', this. el. dom); var tfEl = Ext. core. domHelper. insertAfter (table, {t Ag: 'div ', style: 'border: 0px;', children: [{tag: 'div ', cls: 'X-datepicker-footer ux-timefield '}]}, true); this. timefield. render (this. el. child ('div div. ux-timefield '); var p = this. getEl (). parent ('div. x-layer '); if (p) {p. setStyle ("height", p. getHeight () + 31) ;}}, // modify the listener time field, timefield change timeChange: function (tf, time, rawtime) {// if (! This. todayKeyListener) {// before render this. value = this. fillDateTime (this. value); //} else {// this. setValue (this. value); //}, // @ private fillDateTime: function (value) {if (this. timefield) {var rawtime = this. timefield. getRawValue (); value. setHours (rawtime. h); value. setMinutes (rawtime. m); value. setSeconds (rawtime. s);} return value;}, // @ private changeTimeFiledValue: function (value ){ This. timefield. un ('change', this. timeChange, this); this. timefield. setValue (this. value); this. timefield. on ('change', this. timeChange, this) ;},/* The TODO time value is bound to the input box. Consider creating this. timeValue saves the date and time separately. * /// overwrite setValue: function (value) {this. value = value; this. changeTimeFiledValue (value); return this. update (this. value) ;}, // overwrite getValue: function () {return this. fillDateTime (this. value) ;}, // Overwrite: fill time before setValue handleDateClick: function (e, t) {var me = this, handler = me. handler; e. stopEvent (); if (! Me. disabled & t. dateValue &&! Ext. fly (t. parentNode ). hasCls (me. disabledCellCls) {me. doCancelFocus = me. focusOnSelect = false; me. setValue (this. fillDateTime (new Date (t. dateValue); // overwrite: fill time before setValue delete me. doCancelFocus; me. fireEvent ('select', me, me. value); if (handler) {handler. call (me. scope | me, me, me. value);} me. onSelect () ;}}, // overwrite: fill time before setValue selectToday: function () {Var me = this, btn = me. todayBtn, handler = me. handler; if (btn &&! Btn. disabled) {// me. setValue (Ext. date. clearTime (new Date (); // src me. setValue (new Date (); // overwrite: fill time before setValue me. fireEvent ('select', me, me. value); if (handler) {handler. call (me. scope | me, me, me. value);} me. onSelect () ;}return me ;}});

2. Reference datetimepicker, which refers to the datefield component and extends it to the datetimefield component:

Ext.Loader.setConfig({enabled:true});Ext.Loader.setPath('MyApp', '../houtai/js');Ext.define('MyApp.ux.DateTimeField', {      extend: 'Ext.form.field.Date',      alias: 'widget.datetimefield',      requires: ['MyApp.ux.DateTimePicker'],      initComponent: function() {          this.format = this.format;          this.callParent();      },      // overwrite      createPicker: function() {          var me = this,              format = Ext.String.format;          return Ext.create('MyApp.ux.DateTimePicker', {                ownerCt: me.ownerCt,                renderTo: document.body,                floating: true,                hidden: true,                focusOnShow: true,                minDate: me.minValue,                maxDate: me.maxValue,                disabledDatesRE: me.disabledDatesRE,                disabledDatesText: me.disabledDatesText,                disabledDays: me.disabledDays,                disabledDaysText: me.disabledDaysText,                format: me.format,                showToday: me.showToday,                startDay: me.startDay,                minText: format(me.minText, me.formatDate(me.minValue)),                maxText: format(me.maxText, me.formatDate(me.maxValue)),                listeners: {                    scope: me,                    select: me.onSelect                },                keyNavConfig: {                    esc: function() {                        me.collapse();                    }                }            });      }  });

3. To use xtype: datetimefield in form, first introduce the extension class:

requires:'MyApp.ux.DateTimeField',

Specific use:

{Xtype: 'datetimefield', width: 300, labelWidth: 80, endDateField: 'etime', vtype: 'daterange ', fieldLabel: 'Minimum record time limit', format: 'Y-m-d H: I: s', name: 'stime '}, {xtype: 'datetimefield', width: 300, labelWidth: 80, startDateField: 'stime', vtype: 'daterange ', fieldLabel: 'record time ceiling', format: 'Y-m-d H: I: s', name: 'etime '},

4. Page effects:

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1521041G2-0.jpg "style =" float: none; "title =" 1.jpg"/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/15210430Z-1.jpg "style =" float: none; "title =" 2.jpg"/>

5. User Experience:

You can select the input date, time, minute, and second, but the operation experience is slightly unsatisfactory. For example, the selector only has the "now" button. If the "OK" button is added, the selector disappears and the value of the date, hour, and second is filled in the box. Select the exact time that is not 'right', and end with the click date. The year, month, day, hour, minute, and second in the box are exactly the same as those in the selector.