下面是关于jquery UI 1.72之datepicker的完整攻略：
介绍
jquery UI 1.72是一款基于jquery的UI组件库，其中包含了丰富的UI组件，包括日期选择器（datepicker）。datepicker组件可以方便地让用户选择日期，支持各种格式和语言，也可自定义样式。接下来，我们来详细了解如何使用datepicker。
安装
使用datepicker前需要先安装jquery和jquery-ui，可以通过直接下载和引用相关文件或使用cdn。两个文件下载链接如下：
- jquery: https://code.jquery.com/jquery-3.6.0.min.js
- jquery-ui: https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
安装完成后，可以在html文件head中引用：
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
使用
使用datepicker非常简单，只需要对指定的输入框调用datepicker()方法即可。例如：
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
这段代码创建了一个包含文字“Date:”和一个输入框的段落，输入框带有一个id属性（“datepicker”）。在JS中使用$（）函数找到文档对象，随后使用datepicker（）方法将其转换为datepicker小部件。日期选择器弹出窗口将在输入框单击时显示。
不过，datepicker支持各种选项和事件，如下是一些常用的选项和事件：
- dateFormat：设置日期格式。
- minDate：设置允许选择的最早日期，可以为数字、字符串、日期对象。
- maxDate：设置允许选择的最晚日期，可以为数字、字符串、日期对象。
- defaultDate：设置默认的选择日期，可以为数字、字符串、日期对象。
- showOtherMonths：是否显示其它月份的日期。
- onSelect：选择日期时触发的回调函数。
- onClose：选择器关闭时触发的回调函数。
下面是一个例子，展示了如何使用其中一些常用选项：
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
minDate: -7,
maxDate: "+2M",
defaultDate: "+5D",
showOtherMonths: true,
onSelect: function(date) {
console.log(date);
},
onClose: function(date) {
console.log("datepicker closed");
}
});
});
</script>
这个例子设置了日期格式为“年-月-日”，允许选择的日期范围是7天前到2个月后，设置默认的选择日期为5天后，显示其它月份的日期。在选择日期时，在控制台输出选择日期；在选择器关闭时，在控制台输出信息“datepicker closed”（仅为示例，可以根据需求编写更复杂的回调函数）。
总结
本文介绍了jquery UI 1.72之datepicker的安装和使用，包括如何设置选项和事件的示例。datepicker是一个方便且功能强大的UI组件，为用户选择日期提供了很好的体验。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery UI 1.72 之datepicker - Python技术站
微信扫一扫 
支付宝扫一扫 