jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下
使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:
<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="end">
在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件
Js代码如下
$("#start").datepicker();
$("#end").datepicker();
});
实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。
第二步 设置开始和结束日期
当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。
Js代码如下
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="end">
Js代码如下
dates.datepicker();
第二步 同样在选择日期后,触发onSelect事件,调用函数传递selectedDate参数,
函数体中首先判断触发事件的是开始日期还是结束日期,通过该判断来指定设置minDate或者是maxDate,然后利用not()函数,来反向选择另一个datepicker对象,并设置其对应的属性。
Js代码如下
onSelect: function(selectedDate){
var option = this.id == "start" ? "minDate" : "maxDate";
dates.not(this).datepicker("option", option, selectedDate);
}
});


jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)的更多相关文章
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
- Jquery UI的datepicker插件使用
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...
- 浅析jquery ui的datepicker组件
今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...
- 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记
最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...
- day15—jQuery UI之widgets插件
转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...
- WdatePicker 开始日期不能大于结束日期,结束时间不能小于开始时间
<input class="input_calendar inputcss" id="startDate" runat="server" ...
- WdatePicker开始日期不能大于结束日期
<input class="input_calendar inputcss" id="startDate" runat="server" ...
- EasyUI-datebox设置开始日期小于结束日期,并且结束日期小于当前日期
datebox设置开始日期小于结束日期,并且结束日期小于当前日期 //日期控制扩展选择日期小于等于当前日期,开始日期小于等于结束日期 $("#datebox1").datebox( ...
- jQuery UI的datepicker日期控件如何让他显示中文
首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...
随机推荐
- ExtJs5_继承自定义一个控件
Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了.自定义一个控件最简单的办法就是继承一个已有的控件.根据上一节的需要,我做了一个Button的子类.首先根据目录结构,在app目录下建立一 ...
- 玩死人不偿命的CLOUDSTACK
玩过CLOUDSTACK(CS)的人,一定不会陌生下面的LOG: 2013-12-27 18:26:43,861 DEBUG [allocator.impl.FirstFitAllocator] (J ...
- h.264全搜索以及快速全搜索算法
Full Search 全搜索算法是最简单暴力的一种搜索算法,对搜索范围内的所有像素点都进行匹配对比,选出最合适的运动向量,以下就是一个搜索范围为4的全搜索范围(单个像素点) /*! ******** ...
- 第23章 COM和ActiveX(COM可以实现跨进程跨机器的函数调用)
控件对象既可在EXE中实现,也可在DLL中实现.这种实现对于COM对象的用户来说是透明的.因为COM提供了调度服务(marshaling).COM调度机制能够化进程甚至跨机器的函数调用,这使得16位程 ...
- 树形dp-CF-337D. Book of Evil
题目链接: http://codeforces.com/problemset/problem/337/D 题目大意: 给一棵树,m个点,一个距离d,求有多少个点A,使得A到所有的m个点距离都不超过d. ...
- Oracle 用户权限管理
SQL> select * from ROLE_SYS_PRIVS where ROLE='RESOURCE'; ROLE PRIVILEGE ADM --------------------- ...
- MFC自定义消息
本文地址:http://blog.163.com/strive_only/blog/static/893801682010101911467765/ 消息机制是windows的典型运行机制,在MFC中 ...
- 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, ...
- MySQL数据库的安装
官方下载地址: http://downloads.mysql.com/archives/community/ msi为安装版,zip为免安装版,最新版本的MySQL没有64位windows的msi版囧 ...
- Linux 上使用 Gmail SMTP 服务器发送邮件通知
导读 假定你想配置一个 Linux 应用,用于从你的服务器或桌面客户端发送邮件信息.邮件信息可能是邮件简报.状态更新(如 Cachet).监控警报(如 Monit).磁盘时间(如 RAID mdadm ...