easyui datebox 只选择月份控件

第一份日志,就贴昨天解决的问题吧,查了 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));
  }
});

你可能感兴趣的:(easyui,月份,datebox)