控件官网： 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. 企业应用的Web程序的安全性

    提起安全性这个话题,大家恐怕依稀还记得Sony的PSP账户信息泄露的事故造成的重大损失.但是又隐隐觉得这事儿离我很远,无需过多考虑.也有的人会想,我们做的是企业内部系统所以不必太在意.但是,Web程序 ...

  2. SAX EntityResolver 的作用

    1.1 何为 EntityResolver : 官方解释: 如果SAX应用程序叙事实现自定义处理外部实体,则必须实现此接口, 并使用setEntityResolver方法向SAX 驱动器注册一个实例. ...

  3. hdu 1018

    数学题  用的这个方法比较烂 g++超时  c++ 406ms /******************************************************************* ...

  4. POJ 2193 Lenny's Lucky Lotto Lists （DP）

    题目链接 题意 : 给你两个数N和M,让你从1到M中找N个数组成一个序列,这个序列需要满足的条件是后一个数要大于前一个数的两倍,问这样的序列有多少,输出. 思路 : dp[i][j]代表着长度为 i ...

  5. GridView中DataKeyNames的应用小结

    一. GridView的DataKeyNames属性设为"ID,Name" GridView1.DataKeyNames = new string[]{ "ID" ...

  6. ANDROID_MARS学习笔记_S01_012_RatingBar

    1.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...

  7. pogo pin连接器塑胶部件的缺陷及产生原因分析

    pogo pin连接器塑胶部件异色.褪色产品的颜色与标准颜色不同的现象.与树脂颜色不同为异色:注塑后颜色发生改变的现象为变色. 产生的主要原因:1.着色错误(色粉有误) 2.树脂污染3.过多使用粉碎品 ...

  8. WPF博客地址分享

    http://www.cnblogs.com/chenxizhang/archive/2010/03/25/1694604.html http://www.cnblogs.com/lzhp/archi ...

  9. [原]捉虫记3：_ConectionPtr指针调用open失败

    背景 产品使用MySQL来存储报警服务产生的报警.在报警服务的组件中使用ADO接口 客户方有两台计算机,一台计算机A用来组态,且可以对设备进行调试,操作系统是Win7 64bit 专业版,安装了VS2 ...

  10. Android开发之ContentValues

    SQLite数据库进行CRUD的时候, 用到了ContentValues类,负责存储名值对,名都是String类型,值都是基本类型. 例子: ContentValues values=new Cont ...