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

最新推荐文章于 2017-03-21 17:15:41 发布

baiyangliu

最新推荐文章于 2017-03-21 17:15:41 发布

阅读量7.7k

点赞数

分类专栏：代码 ExtJS JavaScript

本文链接：https://blog.csdn.net/baiyang_liu/article/details/8785890

版权

这篇博客介绍了如何在ExtJS中扩展时间控件，实现显示年月日时分秒的选择功能。作者提供了一个名为`Ext.ux.form.TimePickerField`的组件，该组件包含小时、分钟和秒数的数字输入框，允许用户精确选择时间。此外，还展示了如何结合日期选择器创建`Ext.ux.DateTimePicker`组件，以同时选择日期和时间。通过`Ext.ux.DateTimePicker`，用户可以方便地设置时间格式并处理时间选择事件。

摘要由CSDN通过智能技术生成

效果如下：

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 input
	inputType : '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 setValue

		me.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));