近期需要对2015年的一个项目进行维护，要到这样的一个需求：每周的值班计划需要提前制定；提供给用户一个界面，可以清楚的看到每年、每月有哪些周已经制定了计划。
经过十分钟的思考，我决定在时间控件上做一些变动。让用户可以在选择时间的时候，可以看到今年那些月份内都已经制定计划、部分制定计划、没有制定计划。虽然在提出之后，没有采用这个方案。但是，我还是决定把做出来的东西记录一下。
效果如图所示：
改动主要有：
1. 打开日期选择框，默认页面是月份选择，而不是原版的日期选择
2. 可以针对不通的状态决定当月、当日的背景颜色，更直观
该控件是在 Web开发网：easyui datebox只显示年月选择，隐藏日期 的基础上改的。他的这个是实现了只选择月份，屏蔽掉日期选择。
我本身也是前端小白，改这个东西也是查了很多资料，写的很粗糙。如果哪位老哥觉得有问题，还请指出，多谢~
1 <div id="head-div"> 2 <div id="head-div-one"> 3 <span class="l-btn-text" style="margin-left:-1px">年月</span> 4 <input id="db" editable="fasle"/> 5 </div> 6 </div> 7 <script type="text/javascript"> 8 $(function () { 9 var db = $('#db'); 10 db.datebox({ 11 onShowPanel: function () {//显示日期选择对象后再触发弹出月份层的事件，初始化时没有生成月份层 12 span.trigger('click'); //触发click事件弹出月份层 13 //fix 1.3.x不选择日期点击其他地方隐藏在弹出日期框显示日期面板 14 if (p.find('div.calendar-menu').is(':hidden')) p.find('div.calendar-menu').show(); 15 if (!initLoad) setTimeout(function () {//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔 16 tds = p.find('div.calendar-menu-month-inner td'); 17 changeDateColor(); 18 19 //绑定点击月份事件 20 p.find('div.calendar-menu-month-inner td').bind("click", function () { 21 changeDateColor(); 22 }); 23 //绑定点击标题事件 24 $(".calendar-title span").bind("click", function () { 25 changeDateColor(); 26 }); 27 //绑定年份选择按钮事件 28 $(".calendar-menu-prev").bind("click", function () { 29 changeDateColor(); 30 }); 31 $(".calendar-menu-next").bind("click", function () { 32 changeDateColor(); 33 }); 34 35 initLoad = true; 36 }, 0); 37 //changeDateColor(); 38 //隐藏 标题两侧按钮 39 $(".calendar-prevmonth").hide(); 40 $(".calendar-nextmonth").hide(); 41 $(".calendar-prevyear").hide(); 42 $(".calendar-nextyear").hide(); 43 //禁止年份输入框编辑 44 $(".calendar-menu-year").attr("disabled","disabled"); 45 //解绑年份输入框中任何事件 46 $(".calendar-menu-year").unbind(); 47 }, 48 parser: function (s) { 49 if (!s) return new Date(); 50 var arr = s.split('-'); 51 return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); 52 }, 53 formatter: function (d) { return d.getFullYear() + '-' + (d.getMonth() + 1);/*getMonth返回的是0开始的，忘记了。。已修正*/ } 54 }); 55 56 //改变颜色 57 function changeDateColor(){ 58 //改变月份颜色 59 p.find('div.calendar-menu-month-inner td').each(function(index,element){ 60 year = $(".calendar-menu-year").val(); 61 if(element.abbr <= 5 && year == "2018" || year < "2018"){ 62 element.bgColor = "#9AFF9A"; 63 }else if(element.abbr > 5 && element.abbr <= 6 &&year == "2018"){ 64 element.bgColor = "#F0E68C"; 65 }else{ 66 element.bgColor = "#CD5C5C"; 67 } 68 }); 69 70 var nowDate = Date.parse(new Date("2018", "6"-1, "10", "23", "59", "59")); 71 //改变日期颜色 72 p.find(".calendar-day").each(function(index,element){ 73 var arr = element.abbr.split(","); 74 var thisDate = Date.parse(new Date(arr[0], arr[1]-1, arr[2], "23", "59", "59")); 75 if( thisDate <= nowDate ){ 76 console.log(element); 77 element.bgColor = "#9AFF9A"; 78 }else{ 79 element.bgColor = "#CD5C5C"; 80 } 81 }); 82 $(".calendar-selected").removeClass("calendar-selected "); //移除被选中效果 83 } 84 85 var p = db.datebox('panel'), //日期选择对象 86 initLoad = false, //初始化状态 87 aToday = p.find('a.datebox-current'), 88 year = undefined; 89 //显示月份层的触发控件 90 span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本 91 p.find('span.calendar-text'); //1.4.x版本 92 93 if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板 94 aToday.unbind('click').click(function () { 95 var now=new Date(); 96 db.datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.getMonth() + 1)); 97 }); 98 } 99 }); 100 </script>