jquery 日期控件

控件官网： http://www.interidea.org/demo/icalendar.php#demohtml
绑定控件

 $("#startdate").icalendar({ use: true, show: true, className: "startcalendar" });
             $("#enddate").icalendar({ use: true, show: true, className: "endcalendar" });

 <div id="datecalendar" >
             <div class="date">
                 <span><a href="javascript:void(0)" onclick="faster('今天')">今天</a></span>
                 <span><a href="javascript:void(0)" onclick="faster('昨天')">昨天</a></span>
                 <span><a href="javascript:void(0)" onclick="faster('近七天')">近七天</a></span>
                 <span><a href="javascript:void(0)" onclick="faster('本月')">本月</a></span>
                 <span><a href="javascript:void(0)" onclick="faster('上个月')">上个月</a></span>
             </div>
             <div>
                 <div id="startdiv">
                     <div style="padding:5px 0px;">开始时间：<span id="startdate">@ViewBag.begincalendar</span></div>
                     <div class="startcalendar"></div>
                 </div>
                 <div id="enddiv">
                     <div style="padding:5px 0px;">结束时间：<span id="enddate">@ViewBag.endcalendar</span></div>
                     <div class="endcalendar"></div>
                 </div>
                 <div style="clear:both;"></div>
             </div>
             <div id="btns">
                 <input type="button" value="确定" onclick="queding()" />
                 <input type="button" value="取消" onclick="qx()"/>
             </div>
         </div>

设置的css

 .startcalendar{width:210px; z-index:; display:none; background:#FFF; border:#ddd solid 1px; overflow:hidden; margin:1px 0px;}
 .startcalendar dl{ width:208px; margin:0px; padding:1px; display:block; float:left;}
 .startcalendar dl dt{ width:100%; height:25px; line-height:25px; background:#EEE; font-size:0px; word-spacing:0px; text-align:center; vertical-align:top; }
 .startcalendar dl dt a,.startcalendar dl dt .empty{ display:inline-block; width:10%; text-decoration:none; font-size:11px; color:#333; }
 .startcalendar dl dt a:hover{ background:#CCC; color:#FFF; }
 .startcalendar dl dt span{ display:inline-block; width:80%; font-size:12px; cursor:pointer; }
 .startcalendar dl dt span a{ display:inline; width:auto; font-size:12px; font-weight:bold; color:#333; margin:0px 2px; text-decoration:underline; }
 .startcalendar dl dt span a:hover{ background:none; color:#F05400; }
 .startcalendar dd { width:100%; margin:0px; padding:0px; font-size:0px; word-spacing:-11px; text-align:left; vertical-align:top; text-align:center;}
 .startcalendar dd div{background:#FAFAFA;}
 .startcalendar dd div span,
 .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; }
 .startcalendar dd span a, .startcalendar dd span span{ display:inline-block; width:100%; line-height:25px; text-decoration:none; color:#666;}
 .startcalendar dd span a:hover{color:#F05400; background:#FFDFBF;}
 .startcalendar dd span .selected{background:#FFFF66;}
 .startcalendar dd span .disable{color:#BBB; background:#EEE;}
 .startcalendar dd span .area{color:#F05400; background:#FFDFBF;}
 .startcalendar dd .month,
 .startcalendar dd .year {width:25%; height:50px; }
 .startcalendar dd .month a,
 .startcalendar dd .year a{width:100%; height:50px; line-height:50px; overflow:hidden;}
 .startcalendar dd .week0 {color:#FF4400; }
 .startcalendar dd .week6 {color:#88CC00; }
 .startcalendar .close { display:block; font-size:10px; text-align:right; background:#EEE; width:100%; }
 .startcalendar .close a{ display:inline-block; line-height:14px; width:14px; margin-right:5px; text-align:center; text-decoration:none; color:#333;}
 .startcalendar .close a:hover{ background:#CCC;}

 .endcalendar{width:210px; z-index:; display:none; background:#FFF; border:#ddd solid 1px; overflow:hidden; margin:1px 0px;}
 .endcalendar dl{ width:208px; margin:0px; padding:1px; display:block; float:left;}
 .endcalendar dl dt{ width:100%; height:25px; line-height:25px; background:#EEE; font-size:0px; word-spacing:0px; text-align:center; vertical-align:top; }
 .endcalendar dl dt a,.endcalendar dl dt .empty{ display:inline-block; width:10%; text-decoration:none; font-size:11px; color:#333; }
 .endcalendar dl dt a:hover{ background:#CCC; color:#FFF; }
 .endcalendar dl dt span{ display:inline-block; width:80%; font-size:12px; cursor:pointer; }
 .endcalendar dl dt span a{ display:inline; width:auto; font-size:12px; font-weight:bold; color:#333; margin:0px 2px; text-decoration:underline; }
 .endcalendar dl dt span a:hover{ background:none; color:#F05400; }
 .endcalendar dd { width:100%; margin:0px; padding:0px; font-size:0px; word-spacing:-11px; text-align:left; vertical-align:top; text-align:center;}
 .endcalendar dd div{background:#FAFAFA;}
 .endcalendar dd div span,
 .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; }
 .endcalendar dd span a, .endcalendar dd span span{ display:inline-block; width:100%; line-height:25px; text-decoration:none; color:#666;}
 .endcalendar dd span a:hover{color:#F05400; background:#FFDFBF;}
 .endcalendar dd span .selected{background:#FFFF66;}
 .endcalendar dd span .disable{color:#BBB; background:#EEE;}
 .endcalendar dd span .area{color:#F05400; background:#FFDFBF;}
 .endcalendar dd .month,
 .endcalendar dd .year {width:25%; height:50px; }
 .endcalendar dd .month a,
 .endcalendar dd .year a{width:100%; height:50px; line-height:50px; overflow:hidden;}
 .endcalendar dd .week0 {color:#FF4400; }
 .endcalendar dd .week6 {color:#88CC00; }
 .endcalendar .close { display:block; font-size:10px; text-align:right; background:#EEE; width:100%; }
 .endcalendar .close a{ display:inline-block; line-height:14px; width:14px; margin-right:5px; text-align:center; text-decoration:none; color:#333;}
 .endcalendar .close a:hover{ background:#CCC;}

 #datecalendar{width:436px; float:left;background: #EEE;padding: 10px; border: 1px solid #DDD; z-index:;}
 #datecalendar .date span{background:#fff; padding:4px 8px; border:1px solid #ddd;}
 #datecalendar .date span a:hover{color:#CA7400;}
 #startdiv,#enddiv{width:212px; float:left; margin-top:10px;}
 #startdiv{margin-right:10px;}
 #btns{float:left;margin-top: 5px;}

显示效果：

点击上边的 “今天、昨天、近七天”等按钮直接进行搜索列出，或者在下班两个日历中选择开始时间和结束时间，点击确定按钮，按照选择的时间段进行搜索