控件官网： 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. 字符串截取 方法 String b=a.substring(0, a.indexOf("乘坐"));

    String b=a.substring(0, a.indexOf("乘坐"));

  2. 3140:[HNOI2013]消毒 - BZOJ

    题目描述 Description 最近在生物实验室工作的小 T 遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为 a*b*c,a.b.c均为正整数.为了实验的方便,它被划 ...

  3. win8系统中PL/SQL Developer连接Oracle出现的问题

    注意:所有软件最后不要安装在program files (x86)下  PL/SQL Developer显示Not logged on 以管理员的身份打开PL/SQL Developer 2.   t ...

  4. 区分JS中的undefined,null,"",0和false

    在程序语言中定义的各种各样的数据类型中,我们都会为其定义一个"空值"或"假值",比如对象类型的空值null,.NET Framework中数据库 字段的空值DB ...

  5. live555源码研究（一）------live555MediaServer的启动过程和基本类图

    live555MediaServer.cpp就是live555服务器启动的过程. 一.启动过程 1,构造运行环境,运行环境包括了TaskScheduler 2,构造鉴权数据,也就是登陆的用户名和密码等 ...

  6. POJ2993——Emag eht htiw Em Pleh(字符串处理+排序)

    Emag eht htiw Em Pleh DescriptionThis problem is a reverse case of the problem 2996. You are given t ...

  7. HTTP代理协议 HTTP/1.1的CONNECT方法

    我们平时使用HTTP协议无非就是GET.POST这些方法,但是HTTP的内容远不止那些.今天就来说说HTTP代理使用的CONNECT.这个不是在网页开发上用的,如果没兴趣就跳过吧. APACHE只是作 ...

  8. android 电容屏（二）：驱动调试之基本概念篇

    平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...

  9. JNDI和在tomcat中配置DBCP连接池 元数据的使用 DBUtils框架的使用 多表操作

    1 JNDI和在tomcat中配置DBCP连接池 JNDI(Java Naming and Directory Interface),Java命名和目录接口,它对应于J2SE中的javax.namin ...

  10. 2013ACM省赛题目

    地址就贴这一个吧 都在附近 当时回来也没做做 一伤心了 二是当时实在太弱了 先补两道DP E题的区间DP dp[i][j]  截止到i位置以字母j为结束的上升序列 正序 逆序各来一遍 再循环一遍保存一 ...