控件官网： 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. 深层解析：构建facebook应用商店推荐引擎

    Under the Hood: Building the App Center recommendation engine   As more apps on Facebook Platform ha ...

  2. 使用eclipse生成文档（javadoc）

    使用eclipse生成文档(javadoc)主要有三种方法:1,在项目列表中按右键,选择Export(导出),然后在Export(导出)对话框中选择java下的javadoc,提交到下一步.在Java ...

  3. Cookie Session Cache

    二. 工作机制 Ø Cookie :采用的是客户端保存信息的方案. Ø Session :采用服务器端保存信息的方案. Ø Cache :利用缓存 SRAM 来"静态"的保存写入信 ...

  4. PAT-乙级-1029. 旧键盘(20)

    1029. 旧键盘(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文字的 ...

  5. Hibernate4.1.4配置二级缓存EHCache步骤

    1.当然首先引入EHCache相关的jar包 这些包不需要另外下载,在Hibernate官方网站下载Hibernate4.1.7的压缩包(如:hibernate-release-4.1.7.Final ...

  6. POJ 1850 Code（组合数）

    http://poj.org/problem?id=1850 题意 :给定字符串,系统是用字符串组成的,字符串是按字典序排的.编码系统有三条规则,1这些的单词的长度是由小到大的,2相同长度的按字母在字 ...

  7. ECNU-2574 Principles of Compiler

    题意: 给出编译规则,求是否满足条件 A:= '(' B')'|'x'.    B:=AC.    C:={'+'A}. 其中{}表示里面的内容可以出现0次或者多次 注意点见代码注释 #include ...

  8. poj 3440 Coin Toss 概率问题

    这题主要是推导数学公式!!! 将概率问题转化为圆心所在的面积! 代码如下: #include<iostream> #include<stdio.h> #include<a ...

  9. SQLite入门与分析(一)---简介

    写在前面:出于项目的需要,最近打算对SQLite的内核进行一个完整的剖析,在此希望和对SQLite有兴趣的一起交流.我知道,这是一个漫长的过程,就像曾经去读Linux内核一样,这个过程也将是辛苦的,但 ...

  10. swap chain- IDirect3DSwapChain9

    交换链,对应的接口是IDirect3DSwapChain9,是整个Directx 3D中最核心的接口.D3d程序至少包含一个swap chain,在调用CreateDevice时自动创建, 其中的D3 ...