这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下

使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:

复制代码代码如下:
<script src="js/jquery-1.7.1.js"></script>   
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui 脚本

下面为两种实现步骤:

思路一:

第一步  实现两个datepicker组件。

需要定义两个input标签,类型为text,并指定id属性

HTML代码如下

复制代码代码如下:
开始日期:<input type="text" id="start">
结束日期:<input type="text" id="end">

在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件

Js代码如下

复制代码代码如下:
    $(document).ready(function(){  
        $("#start").datepicker();  
        $("#end").datepicker();  
    });  

实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。

第二步  设置开始和结束日期

当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。

Js代码如下

复制代码代码如下:
$("#start").datepicker({
    onSelect:function(dateText,inst){
       $("#end").datepicker("option","minDate",dateText);
    }
});
$("#end").datepicker({
    onSelect:function(dateText,inst){
        $("#start").datepicker("option","maxDate",dateText);
    }
});

注:匿名函数中的dateText属性为当前选择日期的字符串

思路二:

第一步  同时获得两个文本框对象,并将其转换为datepicker(利用jQuery的选择器)

HTML代码如下

复制代码代码如下:
开始日期:<input type="text" id="start">
结束日期:<input type="text" id="end">

Js代码如下

复制代码代码如下:
var dates = $("#start,#end");
dates.datepicker();

第二步  同样在选择日期后,触发onSelect事件,调用函数传递selectedDate参数,

函数体中首先判断触发事件的是开始日期还是结束日期,通过该判断来指定设置minDate或者是maxDate,然后利用not()函数,来反向选择另一个datepicker对象,并设置其对应的属性。

Js代码如下

复制代码代码如下:
dates.datepicker({
    onSelect: function(selectedDate){
       var option = this.id == "start" ? "minDate" : "maxDate";
       dates.not(this).datepicker("option", option, selectedDate);
    }
});
 

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)的更多相关文章

  1. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  2. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  3. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  4. 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

    最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...

  5. day15—jQuery UI之widgets插件

    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...

  6. WdatePicker 开始日期不能大于结束日期,结束时间不能小于开始时间

    <input class="input_calendar inputcss" id="startDate" runat="server" ...

  7. WdatePicker开始日期不能大于结束日期

    <input class="input_calendar inputcss" id="startDate" runat="server" ...

  8. EasyUI-datebox设置开始日期小于结束日期,并且结束日期小于当前日期

    datebox设置开始日期小于结束日期,并且结束日期小于当前日期 //日期控制扩展选择日期小于等于当前日期,开始日期小于等于结束日期 $("#datebox1").datebox( ...

  9. jQuery UI的datepicker日期控件如何让他显示中文

    首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...

随机推荐

  1. ExtJs5_继承自定义一个控件

    Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了.自定义一个控件最简单的办法就是继承一个已有的控件.根据上一节的需要,我做了一个Button的子类.首先根据目录结构,在app目录下建立一 ...

  2. 玩死人不偿命的CLOUDSTACK

    玩过CLOUDSTACK(CS)的人,一定不会陌生下面的LOG: 2013-12-27 18:26:43,861 DEBUG [allocator.impl.FirstFitAllocator] (J ...

  3. h.264全搜索以及快速全搜索算法

    Full Search 全搜索算法是最简单暴力的一种搜索算法,对搜索范围内的所有像素点都进行匹配对比,选出最合适的运动向量,以下就是一个搜索范围为4的全搜索范围(单个像素点) /*! ******** ...

  4. 第23章 COM和ActiveX(COM可以实现跨进程跨机器的函数调用)

    控件对象既可在EXE中实现,也可在DLL中实现.这种实现对于COM对象的用户来说是透明的.因为COM提供了调度服务(marshaling).COM调度机制能够化进程甚至跨机器的函数调用,这使得16位程 ...

  5. 树形dp-CF-337D. Book of Evil

    题目链接: http://codeforces.com/problemset/problem/337/D 题目大意: 给一棵树,m个点,一个距离d,求有多少个点A,使得A到所有的m个点距离都不超过d. ...

  6. Oracle 用户权限管理

    SQL> select * from ROLE_SYS_PRIVS where ROLE='RESOURCE'; ROLE PRIVILEGE ADM --------------------- ...

  7. MFC自定义消息

    本文地址:http://blog.163.com/strive_only/blog/static/893801682010101911467765/ 消息机制是windows的典型运行机制,在MFC中 ...

  8. HDOJ(HDU) 1720 A+B Coming(进制)

    Problem Description Many classmates said to me that A+B is must needs. If you can't AC this problem, ...

  9. MySQL数据库的安装

    官方下载地址: http://downloads.mysql.com/archives/community/ msi为安装版,zip为免安装版,最新版本的MySQL没有64位windows的msi版囧 ...

  10. Linux 上使用 Gmail SMTP 服务器发送邮件通知

    导读 假定你想配置一个 Linux 应用,用于从你的服务器或桌面客户端发送邮件信息.邮件信息可能是邮件简报.状态更新(如 Cachet).监控警报(如 Monit).磁盘时间(如 RAID mdadm ...