jQuery 入门教程(28): jQuery UI Datepicker 示例（一）
jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。
基本用法如下：
1< !doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9<script>10 $(function () {11 $("#datepicker").datepicker();12 });13 </script>14</head>15<body>16 17<p>Date: <input type="text" id="datepicker" /></p>18 </body>19</html>只需要给选择的HTML元素调用其构造函数即可。
使用动画效果
显示和隐藏DatePicker组件支持配置使用不同的动画效果，下列使用一个列表框来选择DatePicker可以支持的动画效果。
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8" />5 <title>jQuery UI Demos</title>6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />7 <script src="scripts/jquery-1.9.1.js"></script>8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script>9 <script>10 $(function () {11 $("#datepicker").datepicker();12 $("#anim").change(function () {13 $("#datepicker").datepicker("option",14 "showAnim", $(this).val());15 });16 });17 </script>18</head>19<body>20 21 <p>Date:22 <input type="text" id="datepicker" size="30" /></p>23 24 <p>25 Animations:<br />26 <select id="anim">27 <option value="show">Show (default)</option>28 <option value="slideDown">Slide down</option>29 <option value="fadeIn">Fade in</option>30 <option value="blind">Blind (UI Effect)</option>31 <option value="bounce">Bounce (UI Effect)</option>32 <option value="clip">Clip (UI Effect)</option>33 <option value="drop">Drop (UI Effect)</option>34 <option value="fold">Fold (UI Effect)</option>35 <option value="slide">Slide (UI Effect)</option>36 <option value="">None</option>37 </select>38 </p>39 40 41</body>42</html>