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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js Calender控件使用详解
Jan 05 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Vue v-for循环之@click点击事件获取元素示例
Nov 09 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中filter_input函数用法分析
2014/11/15 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
package.json文件配置详解
2017/06/15 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
python 文件与目录操作
2008/12/24 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python+django实现文件上传
2016/01/17 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
关于Python数据结构中字典的心得
2017/12/04 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
django迁移文件migrations的实现
2020/03/31 Python
python爬取抖音视频的实例分析
2021/01/19 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
合伙协议书范本
2014/04/21 职场文书
图书馆标语
2014/06/19 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python