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 相关文章推荐
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
javascript包装对象实例分析
Mar 27 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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查询域名状态whois的类
2006/11/25 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
vue 实现单选框设置默认选中值
2019/11/07 Javascript
JS实现简易计算器
2020/02/14 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
Python常用库推荐
2016/12/04 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
UNIX文件系统分类
2014/11/11 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
酒店营销策划方案
2014/02/07 职场文书
亲子拓展活动方案
2014/02/20 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
校车安全管理责任书
2015/05/11 职场文书
开学典礼观后感
2015/06/15 职场文书
学生病假条怎么写
2015/08/17 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书