让普通的input=text弹出DatePicker

最新推荐文章于 2024-12-28 09:00:00 发布

findu_at

最新推荐文章于 2024-12-28 09:00:00 发布

阅读量235

点赞数

分类专栏： javascript 文章标签： EXT HTML

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个ExtJS的日期选择器插件，该插件可以方便地为普通的文本输入框提供日期选择功能。通过简单的ID配置即可实现日期的选择与显示，并支持自定义日期格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只要设置好id就行了，其他参数配置默认Ext.DatePicker

html 如下：

<input id='dateSign' type="text" size="10">

js如下：

/** 谢忠持 扩张插件 支持普通input=text显示日期 **/
Ext.ux.DatePicker = Ext.extend(Ext.DatePicker, {
	afterRender: function(){
		this.el.setStyle('position', 'absolute');
		this.el.setLeftTop(Ext.get(this.renderTo).getX(),Ext.get(this.renderTo).getY()+Ext.get(this.renderTo).getHeight());
		this.on("select",function(src,date){   
	    	Ext.getDom(this.renderTo).value=date.format(this.format);   
	    	this.hide();
	    });
		var datePicker = this;
		Ext.get(this.renderTo).on('click', function(){
			if(!datePicker.hidden){
				datePicker.hide();
			}else{
				datePicker.show(); 
			}
		});
	}
});

var dateSign = new Ext.ux.DatePicker({
         applyTo: "dateSign",   
         renderTo: "dateSign",    
         hidden: "true",   
         format: "Y-m-d"
});