Ext带时间选择的日期控件

2019独角兽企业重金招聘Python工程师标准>>>

http://pan.baidu.com/s/1dD997yT

别人已经做好了，

示例用法：

    
        
        
        
		
		
		
		
		
		
		
        
		
        
        
        
		
            Ext.onReady(function(){
				new Ext.Viewport({
					layout:'fit',
					items:{
						tbar:[{
							text: '获取值',
							handler: function(){
							    var v = Ext.getCmp('time').getValue();
							    alert(v);
							}
						},{
							id:'time',
							xtype:'datetimefield',
							format:'H:i'
						}]
					}
				});
            });
        
    
    
    

效果如下：

但是有个问题：

这里alert出来的值是js的Date类型，这个类型不是个省油的，所以本人在DateTimeField.js增加了一个函数

getValue2: function(){
        return Ext.form.DateField.superclass.getValue.call(this) || '';
    }

如果这里是用法：

var v = Ext.getCmp('time').getValue2();
alert(v);

那么alert出来的就是String类型的

另外，本人有个需求，就需要getValue这个方法拿到的就是String这个值，怎么办？于是本人研究了一下，搞出来了，方法如下，需要在DateTimeField.js改3处：

1.改getValue方法如下：

getValue: function(){
    return Ext.form.DateField.superclass.getValue.call(this) || '';
}

2.增加getValue2方法如下：

getValue2: function(){
    return this.parseDate(Ext.form.DateField.superclass.getValue.call(this)) || '';
}

3.修改一处:

将

this.menu.picker.setValue(this.getValue() || new Date());

修改为

this.menu.picker.setValue(this.getValue2() || new Date());

另外补充一点，这个例子里所有的文件包括css、图片都是需要用的，而图片的路径是在Spinner.css文件里定义的，所以如果图片放在别处需要改的就是Spinner.css文件。

现在又发现一个问题：

在他给的demo里面测试是没有发现任何问题，但是嵌入到我自己的应用页面里面就成了下面的情况：

1. 时间2个字没对齐

2. 按钮下面有留白问题

解决方法如下：

源程序有这么一段，注意这里有个style: 'width:30'，这里改成36就正常了，还有这里p.getHeight()+31，不要加那个31，于是我把修改好的程序拷贝回到demo里面执行，结果也没有什么不一样，也就说这里如果有发生“变形”就可以考虑在这2个地方修改。

转载于:https://my.oschina.net/u/555061/blog/495264