扩展easyui combobox实现年月选择下拉框

一、场景需求

　　在jquery easyui中datebox可以说是一个使用非常频繁的控件，但在某些场景下其实我们只想要日期中的年月，遗憾的是jquery easyui到目前为止还是没有提供一个年月选择控件。

二、一些网上的解决方案

　　在网上搜索了下，大部分的解决方案是使用datebox控件然后通过formatter属性来得到想要的结果，不过我明明要是年月，可你却还需要我选择日期，总感觉有点怪怪的。

　　不过也发现了一个写得不错的，但这个还留有太多datebox的影子（点击顶部年月还是会回到日期界面）。

　　也有人通过扩展combobox来实现，功能上杠杠的，可美观上却····

三、我的年月选择控件

　　先来张图

　　

 

　　用的是combobox扩展实现，外观上用的是datebox的月份界面。

　　easyui-combobox-extend.js下载地址 链接: 密码: kczp

function showYear(panel, delta) {    var opts = $.data(panel, 'monthcalendar');    opts.year += delta;    var title = $(panel).find('.calendar-title span');    title.html(opts.year + ' ' + opts.monthsName[opts.month]);}function showMonth(panel, delta) {    var opts = $.data(panel, 'monthcalendar');    opts.month += delta;    if (opts.month >= 12) {        opts.year++;        opts.month = 0;    } else if (opts.month < 0) {        opts.year--;        opts.month = 11;    }    var menu = $(panel).find('.calendar-menu-month-inner');    menu.find('td.calendar-selected').removeClass('calendar-selected');    menu.find('td:eq(' + opts.month + ')').addClass('calendar-selected');    var title = $(panel).find('.calendar-title span');    title.html(opts.year + ' ' + opts.monthsName[opts.month]);}$.extend($.fn.combobox.methods, {    monthbox: function (jq) {        return jq.each(function () {            var obj = $(this).combobox();            var panel = obj.combobox("panel");            var ops = {};            ops.monthsName = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];            ops.year = new Date().getFullYear();            ops.month = new Date().getMonth();            var tableDetail = "";            var idx = 0;            for (var i = 0; i < 3; i++) {                var temp = "";                for (var j = 0; j < 4; j++) {                    temp += '' + ops.monthsName[idx++] + '';                }                tableDetail += '' + temp + '';            }            var str = '
      
       ' +                              '
       
' +                              '
       
' +                              '
       
' +                              '
       
' +                              '
       
        ' +                                  '
        ' + ops.year + ' ' + ops.monthsName[ops.month] + '' +                              '
       
' +                          '
      
' +                          '
      
       ' +                              '
       
        ' +                                  '
        
         ' +                                  tableDetail +                                  '
' +                              '
       
' +                          '
      
' +                          '
      
       ' +                              '
       本月' +                              '
       关闭' +                          '';            $(str).appendTo(panel);            var panelHeight = panel.panel('options').height;            var headHeight = panel.find('.calendar-header').outerHeight();            var buttonHeight = panel.find('.datebox-button').outerHeight();            panel.find('.calendar-body').outerHeight(panelHeight - headHeight - buttonHeight - 2);            $.data(panel, 'monthcalendar', ops);            $('.calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear', panel).hover(                    function () { $(this).addClass('calendar-nav-hover'); },                    function () { $(this).removeClass('calendar-nav-hover'); }                );            panel.find('td:eq(' + ops.month + ')').addClass('calendar-selected');            $(panel).find('.calendar-nextmonth').click(function () {                showMonth(panel, 1);            });            $(panel).find('.calendar-prevmonth').click(function () {                showMonth(panel, -1);            });            $(panel).find('.calendar-nextyear').click(function () {                showYear(panel, 1);            });            $(panel).find('.calendar-prevyear').click(function () {                showYear(panel, -1);            });            $(panel).find('.datebox-close').click(function () {                $(obj).combo('hidePanel');            });            $(panel).find('.datebox-current').click(function () {                var opts = $.data(panel, 'monthcalendar');                var month = new Date().getMonth() + 1;                opts.month = month - 1;                panel.find('.calendar-selected').removeClass('calendar-selected');                panel.find('td:eq(' + opts.month + ')').addClass('calendar-selected');                var title = $(panel).find('.calendar-title span');                opts.month = panel.find('.calendar-selected').attr('abbr');                title.html(opts.year + ' ' + opts.monthsName[opts.month]);                $(obj).combo('setValue', opts.year + '-' + (month < 10 ? ('0' + month) : month));                $(obj).combo('setText', opts.year + '-' + (month < 10 ? ('0' + month) : month));            });            $(panel).find('.calendar-menu-month').hover(                    function () { $(this).addClass('calendar-menu-hover'); },                    function () { $(this).removeClass('calendar-menu-hover'); }                ).click(function () {                    panel.find('.calendar-selected').removeClass('calendar-selected');                    $(this).addClass('calendar-selected');                    var opts = $.data(panel, 'monthcalendar');                    var title = $(panel).find('.calendar-title span');                    opts.month = panel.find('.calendar-selected').attr('abbr');                    title.html(opts.year + ' ' + opts.monthsName[opts.month]);                    var month = parseInt(opts.month) + 1;                    $(obj).combo('hidePanel');                    $(obj).combo('setValue', opts.year + '-' + (month < 10 ? ('0' + month) : month));                    $(obj).combo('setText', opts.year + '-' + (month < 10 ? ('0' + month) : month));                });        });    }});
      

 

四、使用方法

 

五、其它

　　完美支撑jquery easyui 1.3.X相应版本。

　　对于jquery easyui 1.4.X相应版本，效果不太理想。