easyui datebox 只选择月份控件

最新推荐文章于 2023-10-12 11:27:02 发布

guixianren123

最新推荐文章于 2023-10-12 11:27:02 发布

阅读量910

点赞数

分类专栏： easyui 文章标签： easyui datebox 月份

本文链接：https://blog.csdn.net/guixianren123/article/details/84744224

版权

easyui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客记录了如何利用EasyUI的datebox控件，通过模拟点击事件实现仅选择月份的功能。作者在API中未找到直接支持该功能的接口，于是自定义了解决方案。思路是监听日期选择时上方月份的点击，通过JavaScript代码触发并修复后续可能出现的bug。

摘要由CSDN通过智能技术生成

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