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

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

一、场景需求

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

二、一些网上的解决方案

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

　　不过也发现了一个写得不错的http://www.w3dev.cn/article/20150106/easyui-datebox-only-show-year-month.aspx，但这个还留有太多datebox的影子（点击顶部年月还是会回到日期界面）。

　　也有人通过扩展combobox来实现http://blog.csdn.net/zhaobao110/article/details/47755445，功能上杠杠的，可美观上却····

三、我的年月选择控件

　　先来张图

　　

 

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

　　easyui-combobox-extend.js下载地址 链接: http://pan.baidu.com/s/1o8U1FLK 密码: 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 += '<td class="calendar-menu-month" abbr=' + idx + '>' + ops.monthsName[idx++] + '</td>';
                }
                tableDetail += '<tr>' + temp + '</tr>';
            }
            var str = '<div class="calendar-header">' +
                              '<div class="calendar-prevmonth"></div>' +
                              '<div class="calendar-nextmonth"></div>' +
                              '<div class="calendar-prevyear"></div>' +
                              '<div class="calendar-nextyear"></div>' +
                              '<div class="calendar-title">' +
                                  '<span>' + ops.year + ' ' + ops.monthsName[ops.month] + '</span>' +
                              '</div>' +
                          '</div>' +
                          '<div class="calendar-body">' +
                              '<div class="calendar-menu-month-inner" style="height:100%">' +
                                  '<table border="0" style="height:100%;100%">' +
                                  tableDetail +
                                  '</table>' +
                              '</div>' +
                          '</div>' +
                          '<div class="datebox-button">' +
                              '<a href="javascript:void(0)" class="datebox-current">本月</a>' +
                              '<a href="javascript:void(0)" class="datebox-close">关闭</a>' +
                          '</dic>';

            $(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));
                });
        });
    }
});

四、使用方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../easyui-combobox-extend.js"></script>
    <script>
        $(function(){
            $('#test').combobox({panelHeight:180,panelWidth:180});
            $('#test').combobox('monthbox');
        })
    </script>
</head>
<body>
    <input id="test"/>
</body>
</html>

五、其它

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

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