下面是详细讲解 jQuery UI Datepicker 时间控件的使用方法（基础版）的攻略。
准备工作
在使用 jQuery UI Datepicker 时间控件之前，需要准备以下库文件：
- jQuery 库文件
- jQuery UI 库文件
我们首先需要在 HTML 页面中引入这两个库文件，可以使用 CDN 加载：
<!-- 引入 jQuery 和 jQuery UI 样式库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
示例 1：最简单的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Datepicker 示例</title>
<!-- 引入 jQuery 和 jQuery UI 样式库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<label for="datepicker">选择日期：</label>
<input type="text" id="datepicker" />
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</body>
</html>
这个示例只有一个输入框和一个标签，我们要使用 jQuery UI Datepicker 时间控件来初始化输入框。在 JavaScript 中，我们使用 $() 函数来选择元素，然后调用 datepicker() 方法来初始化。
示例 2：自定义日期格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Datepicker 示例</title>
<!-- 引入 jQuery 和 jQuery UI 样式库 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<label for="datepicker">选择日期：</label>
<input type="text" id="datepicker" />
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
</body>
</html>
这个示例与示例 1 相似，只是在初始化 datepicker 控件的时候，我们传入了一个参数对象 {dateFormat: "yy-mm-dd"}，来设置日期格式为年-月-日。
攻略总结
以上就是 jQuery UI Datepicker 时间控件的基础用法了。通过这个控件，我们可以轻松地实现一个日期选择器，用户可以用鼠标或键盘来输入日期。
希望这个攻略对大家有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery UI Datepicker时间控件的使用方法（基础版） - Python技术站
微信扫一扫 
支付宝扫一扫 