jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)


Posted in Javascript onMay 22, 2014

使用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)

Javascript 相关文章推荐
jquery实现的网页自动播放声音
Apr 30 Javascript
浅谈JavaScript字符集
May 22 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
js返回顶部实例分享
Dec 21 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
JavaScript中的类型检查
Feb 03 Javascript
浅谈JavaScript字符集
May 22 #Javascript
对new functionName()定义一个函数的理解
May 22 #Javascript
教你如何使用PHP输出中文JSON字符串
May 22 #Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 #Javascript
JS常用表单验证方法总结
May 22 #Javascript
一个Action如何调用两个不同的方法
May 22 #Javascript
选择复选框按钮置灰否则按钮可用
May 22 #Javascript
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP分享图片的生成方法
2018/04/25 PHP
Maps Javascript
2007/01/22 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
javascript 一些用法小结
2009/09/11 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
CentOS中升级Python版本的方法详解
2017/07/10 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
公开服务承诺制度
2014/03/26 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
汽车车尾标语大全
2015/08/11 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Python基础之tkinter图形化界面学习
2021/04/29 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python