Extjs 4.2 datetimefield控件

/*
 * 带时间选择的日历选择器 转载请注明来自于gogo1217.iteye.com
 */
Ext.define('Go.picker.DateTime', {
	extend : 'Ext.picker.Date',// 继承于 Ext.picker.Date
	alias : 'widget.dateptimeicker',// 添加xtype dateptimeicker
	okText : 'ok',// 确认按钮文字描述
	//okTip : '确定',//确认按钮提示内容

	renderTpl : [ 
			'',
			'',
			'',
			'{%this.renderMonthBtn(values, out)%}

', '', '

', '', '', '', '', '{.:this.firstInitial}

', '', '', '', '', '', '{#:this.isEndOfWeek}', '', '', '', '', '', '', // 指定时分秒渲染框架 '', '', '{%this.renderHourBtn(values,out)%}', '{%this.renderMinuteBtn(values,out)%}', '{%this.renderSecondBtn(values,out)%}', '', '', '', // 添加一个确认按钮渲染 '{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}

', '', '

', { firstInitial : function(value) { return Ext.picker.Date.prototype.getDayInitial(value); }, isEndOfWeek : function(value) { // convert from 1 based index to 0 based // by decrementing value once. value--; var end = value % 7 === 0 && value !== 0; return end ? '' : ''; }, renderTodayBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.todayBtn .getRenderTree(), out); }, renderMonthBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.monthBtn .getRenderTree(), out); }, // 指定渲染方法调用 renderHourBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.hourBtn .getRenderTree(), out);// 根据组件获得组件的html输出 }, renderMinuteBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.minuteBtn .getRenderTree(), out); }, renderSecondBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.secondBtn .getRenderTree(), out); }, renderOkBtn : function(values, out) { Ext.DomHelper.generateMarkup(values.$comp.okBtn .getRenderTree(), out); } }], beforeRender : function() { var me = this, _$Number = Ext.form.field.Number; // 在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化 // 组件宽度可能需要调整下，根据使用的theme不同，宽度需要调整 me.hourBtn = new _$Number({ minValue : 0, maxValue : 23, step : 1, width : 55 }); me.minuteBtn = new _$Number({ minValue : 0, maxValue : 59, step : 1, width : 70, labelWidth : 10, fieldLabel : ' ' }); me.secondBtn = new _$Number({ minValue : 0, maxValue : 59, step : 1, width : 70, labelWidth : 10, fieldLabel : ' '// 在组件之前渲染 ':' }); me.okBtn = new Ext.button.Button({ ownerCt : me, ownerLayout : me.getComponentLayout(), text : me.okText, tooltip : me.okTip, tooltipType : 'title', handler : me.okHandler,// 确认按钮的事件委托 scope : me }); me.callParent(); }, finishRenderChildren : function() { var me = this; // 组件渲染完成后，需要调用子元素的finishRender，从而获得事件绑定 me.hourBtn.finishRender(); me.minuteBtn.finishRender(); me.secondBtn.finishRender(); me.okBtn.finishRender(); me.callParent(); }, /**  * 确认 按钮触发的调用  */ okHandler : function() { var me = this, btn = me.okBtn; if (btn && !btn.disabled) { me.setValue(this.getValue()); me.fireEvent('select', me, me.value); me.onSelect(); } return me; }, /**  * 覆盖了父类的方法，因为父类中是根据时间的getTime判断的，因此需要对时、分、秒分别值为0才能保证当前值的日期选择  *   * @private  * @param {Date}  *            date The new date  */ selectedUpdate : function(date) { this.callParent([Ext.Date.clearTime(date, true)]); }, /**  * 更新picker的显示内容，需要同时更新时、分、秒输入框的值  *   * @private  * @param {Date}  *            date The new date  * @param {Boolean}  *            forceRefresh True to force a full refresh  */ update : function(date, forceRefresh) { var me = this; me.hourBtn.setValue(date.getHours()); me.minuteBtn.setValue(date.getMinutes()); me.secondBtn.setValue(date.getSeconds()); return this.callParent(arguments); }, /**  * 从picker选中后，赋值时，需要从时、分、秒也获得当前值  * datetimefield也会调用这个方法对picker初始化，因此添加一个isfixed参数。  *   * @param {Date}  *            date The new date  * @param {Boolean}  *            isfixed True 时，忽略从时分秒中获取值  */ setValue : function(date, isfixed) { var me = this; if (isfixed !== true) { date.setHours(me.hourBtn.getValue()); date.setMinutes(me.minuteBtn.getValue()); date.setSeconds(me.secondBtn.getValue()); } me.value = date; me.update(me.value); return me; }, // @private // @inheritdoc beforeDestroy : function() { var me = this; if (me.rendered) { // 销毁组件时，也需要销毁自定义的控件 Ext.destroy(me.hourBtn, me.minuteBtn, me.secondBtn, me.okBtn); } me.callParent(); } }, function() { var proto = this.prototype, date = Ext.Date; proto.monthNames = date.monthNames; proto.dayNames = date.dayNames; proto.format = date.defaultFormat; }); /**  * 带时间的日期输入控件 转载请注明来自于gogo1217.iteye.com  */ Ext.define('Go.form.field.DateTime', { extend : 'Ext.form.field.Date', alias : 'widget.datetimefield', requires : ['Go.picker.DateTime'], /**  * @cfg {String} format The default date format string which can be  *      overriden for localization support. The format must be valid  *      according to {@link Ext.Date#parse}.  */ format : "Y-m-d H:i:s", /**  * @cfg {String} altFormats Multiple date formats separated by "|"  *      to try when parsing a user input value and it does not match  *      the defined format.  */ altFormats : "Y-m-d H:i:s", createPicker : function() { var me = this, format = Ext.String.format; // 修改picker为自定义picker return new Go.picker.DateTime({ pickerField : me, 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(); } } }); }, /**  * @private  */ onExpand : function() { var value = this.getValue(); // 多传一个参数，从而避免时分秒被忽略。 this.picker.setValue(Ext.isDate(value) ? value : new Date(), true); } });

调用：

													xtype : 'datetimefield',
													fieldLabel : '开始日期',
													labelWidth : 60,
													format : 'Y-m-d H:i:s',
													name : 'from_date'

效果：