控件官网： 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;}

显示效果：

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

jquery 日期控件的更多相关文章

  1. 精确到秒的JQuery日期控件

    项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...

  2. 关于jquery日期控件及时间格式转换2017.05.27

    开始时间:<input type="date" id="starttime" class="time"/>//data为日期控件 ...

  3. jquery日期控件+时分秒

    因为项目需要,一些时间上的查询要精确的时分.先看下效果图吧. 所需要的js 跟css 文件 jsp://特别注意引入的先后顺序 <link rel="stylesheet" ...

  4. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  5. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  6. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  7. jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  8. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  9. 用jquery实现日期控件

    用jquery实现的日期控件,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. tar 解压缩命令

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  2. BZOJ 4036 [HAOI2015] Set 解题报告

    首先我们不能一位一位的考虑,为什么呢? 你想想,你如果一位一位地考虑的话,那么最后就只有 $n$ 个数字,然而他给了你 $2^n$ 个数字,怎么看都不对劲呀.(我是因为这样子弄没过样例才明白的) 所以 ...

  3. dijkstra,bellman-ford,floyd分析比较

    http://www.cnblogs.com/mengxm-lincf/archive/2012/02/11/2346288.html 其实我一直存在疑惑是什么导致dijkstra不能处理负权图? 今 ...

  4. 设置UINavigation的背景图片和背景颜色

    //通过背景图片来设置背景 float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue]; UIImage * ...

  5. Flask, Tornado, GEvent, 以及它们的结合的性能比较

    Flask, Tornado, GEvent, 以及它们的结合的性能比较 英文: http://blog.wensheng.com/2011/10/performance-of-flask-torna ...

  6. 【leetcode】Word Ladder II（hard）★ 图 回头看

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  7. ENVI5.1安装破解教程

    原文地址:  ENVI5.1安装破解_百度经验 http://jingyan.baidu.com/article/020278118b5ded1bcd9ce57a.html   ENVI5.1_x86 ...

  8. c# 可访问性级别

    使用访问修饰符 public.protected.internal 或 private 可以为成员指定以下声明的访问级别之一.   声明的可访问性 含义 public 访问不受限制. protecte ...

  9. Consistent Hashing算法-搜索/负载均衡

    在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括:  轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Respons ...

  10. 命令行下玩VC

    说明:(1)转载请注明出处:http://www.cnblogs.com/opangle/p/4298155.html (2)以下以VS2013为例,并假设VC安装路径为%VC_INSTALL_PAT ...