jQuery UI Datepicker 参数详解与使用示例

"这篇文档主要介绍了jQuery UI库中的DatePicker组件，包括如何在HTML页面中引入相关的CSS和JS文件，以及DatePicker的基本使用方法。此外，还详细讲解了两个重要的参数：altField和altFormat，用于在其他元素中同步显示日期，并自定义日期格式。" 在jQuery UI中，DatePicker是一个非常实用的插件，它允许用户在一个输入框中选择日期，提供了一个友好的用户界面。要在页面中使用DatePicker，首先需要引入jQuery库和jQuery UI库的CSS和JavaScript文件。在提供的代码示例中，可以看到引用了以下两个URL： 1. `http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css`：这是jQuery UI的基础主题样式表，为DatePicker提供了视觉样式。 2. `http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js`：这是jQuery的核心库，DatePicker依赖于它来工作。 3. `http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js`：这是jQuery UI的JavaScript库，包含了DatePicker的功能。 在HTML部分，创建一个`<div>`元素，为其分配一个ID "datepicker"，DatePicker会附加到这个元素上。然后在`<script>`标签内，使用`$(document).ready()`函数确保页面加载完成后，调用`.datepicker()`方法，将DatePicker绑定到具有ID "datepicker"的元素上。 接下来，我们关注两个关键参数： 1. `altField: String`: 这个参数用于指定一个额外的DOM元素，DatePicker会选择的日期将同步到这个元素。默认情况下，日期选择会更新DatePicker所在输入框的值。但通过altField，你可以将日期显示在页面上的其他地方，例如隐藏字段或不同的格式。初始设置使用`$(‘.selector’).datepicker({altField: ‘#actualDate’})`，获取或设置该选项则使用`datepicker('option', 'altField')`。 2. `altFormat: String`: 当`altField`设置后，`altFormat`就用来定义在altField中显示的日期格式。例如，如果希望日期格式为"年-月-日"，可以设置`altFormat: 'yy-mm-dd'`。同样地，获取或设置这个选项也通过`datepicker('option', 'altFormat')`进行。 这两个参数的组合使用，使得DatePicker能够灵活适应各种场景，不仅可以在原始输入框中展示日期，还可以在页面的其他位置以自定义格式呈现。这在处理日期输入时提供了更多的设计和功能可能性。