jquery 日期控件

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

html
绑定控件

$("#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:9998; 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:9998; 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:9999;}
#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;}

显示效果：

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