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

最新推荐文章于 2025-05-08 10:50:52 发布

最新推荐文章于 2025-05-08 10:50:52 发布 · 176 阅读

文章标签：

#ui #javascript #ViewUI

本文介绍了jQuery UI提供的Datepicker组件的基本用法及其动画效果配置。通过简单的HTML和JavaScript代码示例展示了如何创建一个日期选择器，并允许用户通过下拉列表选择不同的动画效果。

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>