您的位置:首页 > 产品设计 > UI/UE

easyui datebox 只选择月份控件

2015-10-10 11:36 309 查看
第一份日志,就贴昨天解决的问题吧,查了 easyui 的 datebox api,没找到只选择月份的接口。

查了类似的,感觉他们的问题复杂化,所以自己在网上贴的,按自己的思路整了个简易版的。

思路:在选择日期的时候,正上方有个月份,一点击,会让你选择月份,所以,可以用代码模拟 click 触发选择日期的事件。然后再修修补补另外的 bug。

先贴 jsp 控件。
<input type="text" name="s_order_month" id="s_order_month"/>


然后是 js 代码。


var tds = false;
$("#s_order_month").datebox({
onShowPanel:function(){
var p = $('#s_order_month').datebox('panel');
p.find('span.calendar-text').trigger('click');
p.find(".datebox-button-a").eq(0).hide();

var span = p.find('span.calendar-text');
//屏蔽选择今天的按钮
p.find('.calendar-text').hide();
//输入框原本可填,会触发事件,屏蔽掉
p.find('.calendar-menu-year').attr("readonly","readonly");
if (!tds)//初始化只需要捆绑一次事件就够了
setTimeout(function () {
tds =p.find('div.calendar-menu-month-inner td');
tds.click(function (e) {
e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
var year = /\d{4}/.exec(span.html())[0]//得到年份
month = parseInt($(this).attr('abbr'), 10); //月份
$('#s_order_month').datebox('hidePanel').datebox('setValue', year + '-' + month + '-' + '01'); //设置日期的值
});
});
},
formatter: function (d) {//设置格式
return d.getFullYear() + '-' + (d.getMonth()<9?'0'+(d.getMonth()+1):(d.getMonth()+1));
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: