如何使用datepicker插件
2016-04-08 11:16
176 查看
演示地址:http://jqueryui.com/datepicker/
下载地址:http://jqueryui.com/download/
使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:
注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui 脚本
下面为两种实现步骤:
第一步 实现两个datepicker组件。
需要定义两个input标签,类型为text,并指定id属性
HTML代码如下
开始日期:
结束日期:
在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件
Js代码如下:
[html] view plain copy
实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。
第二步 设置开始和结束日期
当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。
Js代码如下:
[html] view plain copy
注:匿名函数中的dateText属性为当前选择日期的字符串
实现全部功能的完全代码,如下:
[html] view plain copy
效果图:
下载地址:http://jqueryui.com/download/
使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表。代码示例如下:
注:引入js脚本时,需先引入jQuery类库,后引入jQuery ui 脚本
下面为两种实现步骤:
第一步 实现两个datepicker组件。
需要定义两个input标签,类型为text,并指定id属性
HTML代码如下
开始日期:
结束日期:
在js代码中得到两个input元素的jQuery对象,并将其转化为datepicker组件
Js代码如下:
[html] view plain copy
$(document).ready(function(){ $("#start").datepicker(); $("#end").datepicker(); });
实现以上操作后,在页面中点击文本框,如果出现datepicker则代表成功。
第二步 设置开始和结束日期
当选择开始日期的值后,则结束日期的最小值应该就是开始日期;同理,当选择结束日期后,开始日期的最大值则应该是结束日期。我们可以利用datepicker中的onSelect属性来设置当选择指定日期后触发的事件,通过该事件来指定对应的datepicker最小日期或最大日期。
Js代码如下:
[html] view plain copy
$("#start").datepicker({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText); } }); $("#end").datepicker({ onSelect:function(dateText,inst){ $("#start").datepicker("option","maxDate",dateText); } });
注:匿名函数中的dateText属性为当前选择日期的字符串
实现全部功能的完全代码,如下:
[html] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<script src="date/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="date/jquery-ui.min.css">
</head>
<body>
开始日期:<input type="text" id="start"> 结束日期:<input type="text" id="end">
<script>
$("#start").datepicker({ onSelect:function(dateText,inst){ $("#end").datepicker("option","minDate",dateText); } }); $("#end").datepicker({ onSelect:function(dateText,inst){ $("#start").datepicker("option","maxDate",dateText); } });</script>
</body>
</html>
效果图:
相关文章推荐
- 辗转相除法求得最大公约数的证明
- Android Studio永久显示行数(行号)
- 视图自学详解
- leetcode_085 Maximal Rectangle
- 在eclipse中生成Android的数字证书keystore文件
- Linux vi --文本编辑器
- Linux usermod --修改用户账号
- HashSet
- 笔试题
- Windows Dev Intro - D3D11 Pipeline
- require和include的区别
- 138.括号序列(区间型DP)
- 做汉堡,结对2.0
- JS中实现数组和对象的深拷贝和浅拷贝
- SQL语句导入Excel到数据库
- Objective-C Runtime 运行时:Method Swizzling
- 离线配置ubuntu 14.04 web服务环境
- 将dic里的数据写到model里,自动处理null数据
- 欢迎使用CSDN-markdown编辑器
- iOS 数据缓存