控件官网： 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. （转）Const，Const函数，Const变量，函数后面的Const

    本文转自http://www.cnblogs.com/Fancyboy2004/archive/2008/12/23/1360810.html 看到const 关键字,C++程序员首先想到的可能是co ...

  2. JavaScript中常谈的对象

    为浏览器编写代码时,总少不了window对象 window对象表示JavaScript程序的全局环境 同时 也表示应用的主窗口 到处都是对象 window对象 常用的属性和方法介绍 location ...

  3. java小提示：标示符常见命名规则、常用ASCII

    标示符常见命名规则: A:包:全部小写B:类或者接口:首字母大写:StudentC:方法或者接口:首字母小写,第二个单词开始开始,每个单词首字母大写:studentAgeD:常量:全部大写,多个单词之 ...

  4. Netty4.x中文教程系列（二） – 白话概念

    "Hello World"的代码固然简单,不过其中的几个重要概念(类)和 Netty的工作原理还是需要简单明确一下,至少知道其是负责什.方便自己以后更灵活的使用和扩展.   声明, ...

  5. PHP5 session 详解

    http协议是WEB服务器与客户端(浏览器)相互通信的协议,它是一种无状态协议.所谓无状态,指的是不会维护http请求数据,http请求是独立的,非持久的.而越来越复杂的WEB应用,需要保存一些用户状 ...

  6. "reactive programming"的概念

    下面的内容大多是翻译来的. Reactive Programming? What is Reactive Programming? 为了了解Reactive——从编程范式至其背后的动机,有必要了解现在 ...

  7. SDUT2191Calendar

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2191 题意:给你两个年月日,让你算出其中经历了 ...

  8. photoshop：制作木板木纹

    1.设置颜色为木头相近颜色 2.滤镜->渲染->云彩 3.滤镜->杂色->添加杂色 4.滤镜->模糊->动感模糊 5.用矩形选取选取某块区域 6.滤镜->扭曲 ...

  9. Eclipse字体修改设置

    修改字体 Window -> Preferences -> General -> Appearences -> Colors and Fonts 选择java选项,看到Java ...

  10. 第二个C语言代码

    有问题,还没找出哪里出错了       输入一串字符,问号结束 统计1~9各出现的次数 ******************************************************** ...