jQuery UI API 类别 - 小部件
jQuery UI 包含了许多小部件（Widgets），这些是可重用的、封装了特定用户界面功能的组件。每个小部件都有自己的 API，允许你定制其行为和外观。以下是一个使用 jQuery UI 的 datepicker 小部件的示例代码。
datepicker 小部件提供了一个日期选择器，用户可以通过点击日历图标或直接在输入框中选择日期。
HTML 代码：
html
<!DOCTYPE html>
<html lang="en">
<head> yamizu.com.cn/5Jm3N1S7Z
hnrzc.cn/1Pi5A8D3W
sjpdcp.cn/1Eg6D0T6I
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Datepicker 小部件示例</title>
<link rel="stylesheet" href=";
<script src=";
<script src=";
</head>
<body>
<p>日期：<input type="text" id="datepicker"></p>
<script>
$(function() {
$("#datepicker").datepicker({
展开全文
dateFormat: "yy-mm-dd", // 设置日期格式
altField: "#alternate", // 可选：将选择的日期同步到另一个元素
altFormat: "DD, d MM, yy", // 可选：设置另一个元素的日期格式
minDate: 0, // 可选：设置可选日期的最小日期（今天）
maxDate: "+1M", // 可选：设置可选日期的最大日期（一个月后）
numberOfMonths: 2, // 可选：显示两个月的日历
showButtonPanel: true, // 可选：显示额外的按钮面板，包括“今天”和“关闭”按钮
onClose: function(selectedDate) { // 可选：关闭日期选择器时执行的函数
console.log("Selected date: " + selectedDate);
</script>
</body>
</html>
在这个示例中，我们首先引入了 jQuery 和 jQuery UI 的库文件。然后，我们创建了一个带有 id="datepicker" 的 <input> 元素，用于显示用户选择的日期。在 JavaScript 部分，我们使用 $("#datepicker").datepicker({...}) 来初始化 datepicker 小部件，并设置了一些选项。这些选项包括日期格式、可选日期范围、显示的月份数量等。我们还添加了一个 onClose 事件处理器，当日期选择器关闭时，它会在控制台中打印出所选日期。
请注意，此示例中的 altField 和 altFormat 选项是注释掉的，因为示例中并没有提供对应的 #alternate 元素。如果你想要使用这些选项，你需要在 HTML 中添加一个具有相应 ID 的元素，并取消这些选项的注释。
此外，随着 jQuery UI 版本的更新，API 和可用的选项可能会有所变化。因此，建议查阅对应版本的官方文档以获取最准确的信息。
评论