扩展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%;width: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相应版本,效果不太理想。