jquery 日期控件
控件官网： http://www.interidea.org/demo/icalendar.php#demo
html
绑定控件
1 $("#startdate").icalendar({ use: true, show: true, className: "startcalendar" }); 2 $("#enddate").icalendar({ use: true, show: true, className: "endcalendar" });
1 <div id="datecalendar" > 2 <div class="date"> 3 <span><a href="javascript:void(0)" onclick="faster('今天')">今天</a></span> 4 <span><a href="javascript:void(0)" onclick="faster('昨天')">昨天</a></span> 5 <span><a href="javascript:void(0)" onclick="faster('近七天')">近七天</a></span> 6 <span><a href="javascript:void(0)" onclick="faster('本月')">本月</a></span> 7 <span><a href="javascript:void(0)" onclick="faster('上个月')">上个月</a></span> 8 </div> 9 <div> 10 <div id="startdiv"> 11 <div style="padding:5px 0px;">开始时间：<span id="startdate">@ViewBag.begincalendar</span></div> 12 <div class="startcalendar"></div> 13 </div> 14 <div id="enddiv"> 15 <div style="padding:5px 0px;">结束时间：<span id="enddate">@ViewBag.endcalendar</span></div> 16 <div class="endcalendar"></div> 17 </div> 18 <div style="clear:both;"></div> 19 </div> 20 <div id="btns"> 21 <input type="button" value="确定" onclick="queding()" /> 22 <input type="button" value="取消" onclick="qx()"/> 23 </div> 24 </div>
设置的css
1 .startcalendar{width:210px; z-index:9998; display:none; background:#FFF; border:#ddd solid 1px; overflow:hidden; margin:1px 0px;} 2 .startcalendar dl{ width:208px; margin:0px; padding:1px; display:block; float:left;} 3 .startcalendar dl dt{ width:100%; height:25px; line-height:25px; background:#EEE; font-size:0px; word-spacing:0px; text-align:center; vertical-align:top; } 4 .startcalendar dl dt a,.startcalendar dl dt .empty{ display:inline-block; width:10%; text-decoration:none; font-size:11px; color:#333; } 5 .startcalendar dl dt a:hover{ background:#CCC; color:#FFF; } 6 .startcalendar dl dt span{ display:inline-block; width:80%; font-size:12px; cursor:pointer; } 7 .startcalendar dl dt span a{ display:inline; width:auto; font-size:12px; font-weight:bold; color:#333; margin:0px 2px; text-decoration:underline; } 8 .startcalendar dl dt span a:hover{ background:none; color:#F05400; } 9 .startcalendar dd { width:100%; margin:0px; padding:0px; font-size:0px; word-spacing:-11px; text-align:left; vertical-align:top; text-align:center;} 10 .startcalendar dd div{background:#FAFAFA;} 11 .startcalendar dd div span, 12 .startcalendar dd span{ display:inline-block; width:14%; height:25px; line-height:25px; font-size:12px; word-spacing:normal; text-align:center; color:#666; vertical-align:top; } 13 .startcalendar dd span a, .startcalendar dd span span{ display:inline-block; width:100%; line-height:25px; text-decoration:none; color:#666;} 14 .startcalendar dd span a:hover{color:#F05400; background:#FFDFBF;} 15 .startcalendar dd span .selected{background:#FFFF66;} 16 .startcalendar dd span .disable{color:#BBB; background:#EEE;} 17 .startcalendar dd span .area{color:#F05400; background:#FFDFBF;} 18 .startcalendar dd .month, 19 .startcalendar dd .year {width:25%; height:50px; } 20 .startcalendar dd .month a, 21 .startcalendar dd .year a{width:100%; height:50px; line-height:50px; overflow:hidden;} 22 .startcalendar dd .week0 {color:#FF4400; } 23 .startcalendar dd .week6 {color:#88CC00; } 24 .startcalendar .close { display:block; font-size:10px; text-align:right; background:#EEE; width:100%; } 25 .startcalendar .close a{ display:inline-block; line-height:14px; width:14px; margin-right:5px; text-align:center; text-decoration:none; color:#333;} 26 .startcalendar .close a:hover{ background:#CCC;} 27 28 29 .endcalendar{width:210px; z-index:9998; display:none; background:#FFF; border:#ddd solid 1px; overflow:hidden; margin:1px 0px;} 30 .endcalendar dl{ width:208px; margin:0px; padding:1px; display:block; float:left;} 31 .endcalendar dl dt{ width:100%; height:25px; line-height:25px; background:#EEE; font-size:0px; word-spacing:0px; text-align:center; vertical-align:top; } 32 .endcalendar dl dt a,.endcalendar dl dt .empty{ display:inline-block; width:10%; text-decoration:none; font-size:11px; color:#333; } 33 .endcalendar dl dt a:hover{ background:#CCC; color:#FFF; } 34 .endcalendar dl dt span{ display:inline-block; width:80%; font-size:12px; cursor:pointer; } 35 .endcalendar dl dt span a{ display:inline; width:auto; font-size:12px; font-weight:bold; color:#333; margin:0px 2px; text-decoration:underline; } 36 .endcalendar dl dt span a:hover{ background:none; color:#F05400; } 37 .endcalendar dd { width:100%; margin:0px; padding:0px; font-size:0px; word-spacing:-11px; text-align:left; vertical-align:top; text-align:center;} 38 .endcalendar dd div{background:#FAFAFA;} 39 .endcalendar dd div span, 40 .endcalendar dd span{ display:inline-block; width:14%; height:25px; line-height:25px; font-size:12px; word-spacing:normal; text-align:center; color:#666; vertical-align:top; } 41 .endcalendar dd span a, .endcalendar dd span span{ display:inline-block; width:100%; line-height:25px; text-decoration:none; color:#666;} 42 .endcalendar dd span a:hover{color:#F05400; background:#FFDFBF;} 43 .endcalendar dd span .selected{background:#FFFF66;} 44 .endcalendar dd span .disable{color:#BBB; background:#EEE;} 45 .endcalendar dd span .area{color:#F05400; background:#FFDFBF;} 46 .endcalendar dd .month, 47 .endcalendar dd .year {width:25%; height:50px; } 48 .endcalendar dd .month a, 49 .endcalendar dd .year a{width:100%; height:50px; line-height:50px; overflow:hidden;} 50 .endcalendar dd .week0 {color:#FF4400; } 51 .endcalendar dd .week6 {color:#88CC00; } 52 .endcalendar .close { display:block; font-size:10px; text-align:right; background:#EEE; width:100%; } 53 .endcalendar .close a{ display:inline-block; line-height:14px; width:14px; margin-right:5px; text-align:center; text-decoration:none; color:#333;} 54 .endcalendar .close a:hover{ background:#CCC;} 55 56 57 #datecalendar{width:436px; float:left;background: #EEE;padding: 10px; border: 1px solid #DDD; z-index:9999;} 58 #datecalendar .date span{background:#fff; padding:4px 8px; border:1px solid #ddd;} 59 #datecalendar .date span a:hover{color:#CA7400;} 60 #startdiv,#enddiv{width:212px; float:left; margin-top:10px;} 61 #startdiv{margin-right:10px;} 62 #btns{float:left;margin-top: 5px;}
显示效果：
点击上边的 “今天、昨天、近七天”等按钮直接进行搜索列出，或者在下班两个日历中选择开始时间和结束时间，点击确定按钮，按照选择的时间段进行搜索
