日期:2014-05-16  浏览次数:20749 次

用My97扩展成的ExtJs日期时间插件

所有关联代码均在附件中下载

示例如下:

?

/**
 * 日期时间控件,可单独显示日期,或日期时间。格式可自己设置。和myDate97设置一样
 * @class Ext.form.DateTimeField
 * @extends Ext.form.TriggerField
 */
Ext.form.DateTimeField = Ext.extend(Ext.form.TriggerField, {
	/**
	 * @param {Array} date97配置列表
	 * @type 
	 */
	dateConfig:null,
	/**
	 * @param {Boolean} 是否显示时间,默认为不显示
	 */
	time:false,
	triggerClass : 'x-form-date-trigger',
	defaultAutoCreate : {tag : "input",type : "text",size : "10",autocomplete : "off"},
	initComponent : function() {
		Ext.form.DateField.superclass.initComponent.call(this);
		this.initDate97js();
		this.initDateConfig();
	},
	onTriggerClick : function(e) {// 点击查找按钮时
		if (this.disabled||this.readOnly) {
			return;
		}
		this.onFocus({});
		var bodyWidth = document.body.clientWidth;
		var xC = document.body.clientWidth - e.xy[0] - this.width;
		var yC = document.body.clientHeight - e.xy[1] - this.height; 
		var x=0;
		var y=0;
		if (xC > 0)
			x = e.xy[0];
		else
			x = document.body.clientWidth - this.width - 4;

		if (yC > 0)
			y = e.xy[1];
		else
			y= document.body.clientHeight - this.height - 4;
//		this.dateConfig['position']={left:e.xy[0],top:e.xy[1]};
		WdatePicker(this.dateConfig);
	},
	initDate97js:function(){
		var obj=this;
		if(!document.getElementById("$date97js")){
			 var  script  =  document.createElement("script");   
			  script.setAttribute("type",   "text/javascript");   
			  script.setAttribute("src",   MCLONIS+"/js/date97/WdatePicker.js");
			  script.setAttribute("id","$date97js");
			  try   
			  {   
				  document.getElementsByTagName("head")[0].appendChild(script);
				  script.onload = script.onreadystatechange = function() {
				 	  if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') 
			            return; 
			         script.onreadystatechange = script.onload = null; 
 			         WdatePicker(1);
				 }
			  }catch(e){}
		}
	},
	initDateConfig:function()
	{
		if(!this.dateConfig)
			this.dateConfig=new Array();
		if(!this.dateConfig['el'])
			this.dateConfig['el']=this.id;
		if(this.time)
			this.addDateConfig("dateFmt",'yyyy-MM-dd HH:mm:ss');
		else
			if(!this.dateConfig["dateFmt"])
				this.dateConfig["dateFmt"]='yyyy-MM-dd';
		if(!this.dateConfig["skin"])
			this.dateConfig["skin"]='ext';
	},
	addDateConfig:function(name,value)
	{
		this.removeDateConfig(name);
		this.dateConfig[name]=value;
	},
	removeDateConfig:function(name){
		for (var i = 0; i < this.dateConfig.length; i++) {
			var temp = this.dateConfig[i];
			if (temp && temp.split(':')[0] == name) {
				this.dateConfig.pop(i);
				return;
			}
		}
	},
	setDateConfig:function(config)
	{
		this.dateConfig=config;
		this.initDateConfig();
	}
});

?


?


?

1 楼 xue811 2010-08-25  
想问一下,这个控件支持ie7吗?
2 楼 xue811 2010-08-25  
冒似我放在项目里,firefox虽然会报错,但是可以用,ie7则不能用,还报$lang未定义!!!请问楼主有解决方法吗?
3 楼 fujingrun 2011-07-13  
挺不错
4 楼 qscchao 2011-08-05  
楼主能给个例子吗,具体怎么使用,我在EXT文件中创建了这个类的对象,但是只是显示日期,不能显示时间。
火狐中显示错误 D is null。
5 楼 kangsoft 2011-08-16  
qscchao 写道
楼主能给个例子吗,具体怎么使用,我在EXT文件中创建了这个类的对象,但是只是显示日期,不能显示时间。
火狐中显示错误 D is null。

有新版本了,需要的话留下邮箱号
6 楼