在开发的时候用到EasyUi的dateBox的日期控件,但是该控件不能直接点击文本框触发,感觉使用体验不是很好,想直接点击文本框触发,就在网上找了下修改的方法,但是没有找到直接能用的。借鉴了一篇EsayUi 1.4.3版本的修改思路,成功的在EasyUi 1.4.5版本修改直接点击文本框触发选择日期事件。代码如下:
先找jquery-easyui-1.4.5的js文件的6702行的tb._size(opts,_4d0);在这行代码下加上以下这段代码:
//直接点击文本框触发日期选择事件 start
if($(_4cd).hasClass("datebox-f")){
_4d2.click(function(){
_4d4.click();
});
}
//end
加上代码中的$(_4cd)、_4d2和_4d4变量按照版本来对应。
修改以后的代码如下:
function _4cc(_4cd,_4ce){
var _4cf=$.data(_4cd,"textbox");
var opts=_4cf.options;
var tb=_4cf.textbox;
var _4d0=tb.parent();
if(_4ce){
opts.width=_4ce;
}
if(isNaN(parseInt(opts.width))){
var c=$(_4cd).clone();
c.css("visibility","hidden");
c.insertAfter(_4cd);
opts.width=c.outerWidth();
c.remove();
}
var _4d1=tb.is(":visible");
if(!_4d1){
tb.appendTo("body");
}
var _4d2=tb.find(".textbox-text");
var btn=tb.find(".textbox-button");
var _4d3=tb.find(".textbox-addon");
var _4d4=_4d3.find(".textbox-icon");
tb._size(opts,_4d0);
//直接点击文本框触发日期选择事件 start
if($(_4cd).hasClass("datebox-f")){
_4d2.click(function(){
_4d4.click();
});
}
//end
btn.linkbutton("resize",{height:tb.height()});
btn.css({left:(opts.buttonAlign=="left"?0:""),right:(opts.buttonAlign=="right"?0:"")});
_4d3.css({left:(opts.iconAlign=="left"?(opts.buttonAlign=="left"?btn._outerWidth():0):""),right:(opts.iconAlign=="right"?(opts.buttonAlign=="right"?btn._outerWidth():0):"")});
_4d4.css({width:opts.iconWidth+"px",height:tb.height()+"px"});
_4d2.css({paddingLeft:(_4cd.style.paddingLeft||""),paddingRight:(_4cd.style.paddingRight||""),marginLeft:_4d5("left"),marginRight:_4d5("right")});
if(opts.multiline){
_4d2.css({paddingTop:(_4cd.style.paddingTop||""),paddingBottom:(_4cd.style.paddingBottom||"")});
_4d2._outerHeight(tb.height());
}else{
_4d2.css({paddingTop:0,paddingBottom:0,height:tb.height()+"px",lineHeight:tb.height()+"px"});
}
_4d2._outerWidth(tb.width()-_4d4.length*opts.iconWidth-btn._outerWidth());
if(!_4d1){
tb.insertAfter(_4cd);
}
opts.onResize.call(_4cd,opts.width,opts.height);