ExtJS时间扩展控件（显示年月日时分秒）

效果如下：

Ext.ux.DateTime.js

/** * @author baiyang * @date 2013-04-10 23:28:02 */Ext.define('Ext.ux.form.TimePickerField', {extend : 'Ext.form.field.Base',alias : 'widget.timepicker',alternateClassName : 'Ext.form.field.TimePickerField',requires : [ 'Ext.form.field.Number' ],// 隐藏BaseField的输入框 , hidden basefield's inputinputType : 'hidden',style : 'padding:4px 0 0 0;margin-bottom:0px',/** * @cfg {String} value initValue, format: 'H:i:s' */value : null,/** * @cfg {Object} spinnerCfg 数字输入框参数, number input config */spinnerCfg : {width : 40},/** Override. */initComponent : function() {var me = this;me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');me.callParent();// called setValueme.spinners = [];var cfg = Ext.apply({}, me.spinnerCfg, {readOnly : me.readOnly,disabled : me.disabled,style : 'float: left',listeners : {change : {fn : me.onSpinnerChange,scope : me}}});me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {minValue : 0,maxValue : 23}));me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {minValue : 0,maxValue : 59}));me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {minValue : 0,maxValue : 59}));me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);},/** * @private Override. */onRender : function() {var me = this, spinnerWrapDom, spinnerWrap;me.callParent(arguments);// render to original BaseField input td// spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom));// // 4.0.2spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0// ->4.1// div->tdspinnerWrap = Ext.get(spinnerWrapDom);me.callSpinnersFunction('render', spinnerWrap);Ext.core.DomHelper.append(spinnerWrap, {tag : 'div',cls : 'x-form-clear-left'});this.setRawValue(this.value);},_valueSplit : function(v) {if (Ext.isDate(v)) {v = Ext.Date.format(v, 'H:i:s');}var split = v.split(':');return {h : split.length > 0 ? split[0] : 0,m : split.length > 1 ? split[1] : 0,s : split.length > 2 ? split[2] : 0};},onSpinnerChange : function() {if (!this.rendered) {return;}this.fireEvent('change', this, this.getValue(), this.getRawValue());},// 依次调用各输入框函数, call each spinner's functioncallSpinnersFunction : function(funName, args) {for ( var i = 0; i < this.spinners.length; i++) {this.spinners[i][funName](args);}},// @private get time as object,getRawValue : function() {if (!this.rendered) {var date = this.value || new Date();return this._valueSplit(date);} else {return {h : this.hoursSpinner.getValue(),m : this.minutesSpinner.getValue(),s : this.secondsSpinner.getValue()};}},// privatesetRawValue : function(value) {value = this._valueSplit(value);if (this.hoursSpinner) {this.hoursSpinner.setValue(value.h);this.minutesSpinner.setValue(value.m);this.secondsSpinner.setValue(value.s);}},// overwritegetValue : function() {var v = this.getRawValue();return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':' + Ext.String.leftPad(v.s, 2, '0');},// overwritesetValue : function(value) {this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;if (!this.rendered) {return;}this.setRawValue(this.value);this.validate();},// overwritedisable : function() {this.callParent(arguments);this.callSpinnersFunction('disable', arguments);},// overwriteenable : function() {this.callParent(arguments);this.callSpinnersFunction('enable', arguments);},// overwritesetReadOnly : function() {this.callParent(arguments);this.callSpinnersFunction('setReadOnly', arguments);},// overwriteclearInvalid : function() {this.callParent(arguments);this.callSpinnersFunction('clearInvalid', arguments);},// overwriteisValid : function(preventMark) {return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark) && this.secondsSpinner.isValid(preventMark);},// overwritevalidate : function() {return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();}});Ext.define("Ext.locale.en.ux.picker.DateTimePicker", {override : "Ext.ux.DateTimePicker",todayText : "现在",timeLabel : '时间'});Ext.define('Ext.ux.DateTimePicker', {extend : 'Ext.picker.Date',alias : 'widget.datetimepicker',todayText : '现在',timeLabel : '时间',requires : [ 'Ext.ux.form.TimePickerField' ],initComponent : function() {// keep time part for valuevar value = this.value || new Date();this.callParent();this.value = value;},onRender : function(container, position) {if (!this.timefield) {this.timefield = Ext.create('Ext.ux.form.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, {tag : '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);}},// listener 时间域修改, timefield changetimeChange : function(tf, time, rawtime) {// if(!this.todayKeyListener) { // before renderthis.value = this.fillDateTime(this.value);// } else {// this.setValue(this.value);// }},// @privatefillDateTime : function(value) {if (this.timefield) {var rawtime = this.timefield.getRawValue();value.setHours(rawtime.h);value.setMinutes(rawtime.m);value.setSeconds(rawtime.s);}return value;},// @privatechangeTimeFiledValue : function(value) {this.timefield.un('change', this.timeChange, this);this.timefield.setValue(this.value);this.timefield.on('change', this.timeChange, this);},// overwritesetValue : function(value) {this.value = value;this.changeTimeFiledValue(value);return this.update(this.value);},// overwritegetValue : function() {return this.fillDateTime(this.value);},// overwrite : fill time before setValuehandleDateClick : 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// setValuedelete me.doCancelFocus;me.fireEvent('select', me, me.value);if (handler) {handler.call(me.scope || me, me, me.value);}me.onSelect();}},// overwrite : fill time before setValueselectToday : function() {var me = this, btn = me.todayBtn, handler = me.handler;if (btn && !btn.disabled) {// me.setValue(Ext.Date.clearTime(new Date())); //srcme.setValue(new Date());// overwrite: fill time before setValueme.fireEvent('select', me, me.value);if (handler) {handler.call(me.scope || me, me, me.value);}me.onSelect();}return me;}});Ext.define('Ext.ux.form.DateTimeField', {extend : 'Ext.form.field.Date',alias : 'widget.datetimefield',requires : [ 'Ext.ux.DateTimePicker' ],initComponent : function() {this.format = this.format + ' ' + 'H:i:s';this.callParent();},// overwritecreatePicker : function() {var me = this, format = Ext.String.format;return Ext.create('Ext.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();}}});}});

调用方法举例：

<script type="text/javascript">Ext.onReady(function() {Ext.create('Ext.panel.Panel', {height : 500,renderTo:Ext.getBody(),items : [ {xtype : 'datetimefield',width:300} ]}).show();});function gg() {alert(Ext.getCmp('sada').getValue());}</script>