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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
前端面试知识点目录一览
Apr 15 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
vue 检测用户上传图片宽高的方法
Feb 06 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
PHP define函数的使用说明
2008/08/27 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
js重写方法的简单实现
2016/07/10 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
优秀广告词大全
2014/03/19 职场文书
应届大学生求职信
2014/07/20 职场文书
综治工作心得体会
2014/09/11 职场文书
四风问题对照检查材料
2014/09/22 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python