jQuery 入门教程(28): jQuery UI Datepicker 示例（一）

最新推荐文章于 2023-04-10 08:49:28 发布

iteye_19603

最新推荐文章于 2023-04-10 08:49:28 发布

阅读量132

点赞数

文章标签： ui javascript ViewUI

jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。

基本用法如下：

 
    1< !doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#datepicker").datepicker(); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p>Date: <inputtype="text"id="datepicker"/></p> 
 
</body> 
 
</html>

只需要给选择的HTML元素调用其构造函数即可。

使用动画效果
显示和隐藏DatePicker组件支持配置使用不同的动画效果，下列使用一个列表框来选择DatePicker可以支持的动画效果。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#datepicker").datepicker(); 
 
$("#anim").change(function () { 
 
$("#datepicker").datepicker("option", 
 
"showAnim", $(this).val()); 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    20
 
<p>Date: 
 
<inputtype="text"id="datepicker"size="30"/></p> 
 
    23
 
<p> 
 
Animations:<br/> 
 
<selectid="anim"> 
 
<optionvalue="show">Show (default)</option> 
 
<optionvalue="slideDown">Slide down</option> 
 
<optionvalue="fadeIn">Fade in</option> 
 
<optionvalue="blind">Blind (UI Effect)</option> 
 
<optionvalue="bounce">Bounce (UI Effect)</option> 
 
<optionvalue="clip">Clip (UI Effect)</option> 
 
<optionvalue="drop">Drop (UI Effect)</option> 
 
<optionvalue="fold">Fold (UI Effect)</option> 
 
<optionvalue="slide">Slide (UI Effect)</option> 
 
<optionvalue="">None</option> 
 
</select> 
 
</p> 
 
    39
 
    40
 
</body> 
 
</html>