jQuery UI datepicker 是一款强大的日期选择器插件，它提供了各种日期格式和选项，是前端开发中常用的工具之一。在本文中，我们将介绍如何使用 jQuery UI datepicker 获取所选日期，并提供详细示例代码和指导意义。
步骤1：引入 jQuery UI datepicker 插件
首先，我们需要在 HTML 文件中引入 jQuery 和 jQuery UI 库以及相关样式表和脚本文件。可以从官方网站上下载这些文件并添加到项目中，或者使用 CDN 引入：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
步骤2：创建日期选择器
接下来，在 HTML 文件中创建一个 input 元素，并为其设置一个 id 属性，然后在 JavaScript 文件中使用 jQuery UI 的 datepicker 方法创建一个日期选择器。
<input type="text" id="datepicker">
$( function() {
$( "#datepicker" ).datepicker();
} );此时，就可以在页面上看到一个日期选择器了。
步骤3：获取所选日期
现在，我们已经创建了一个日期选择器，接下来需要获取所选日期。可以使用 onSelect 回调函数来实现：
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(dateText, inst) {
console.log(dateText); // 输出所选日期
}
});
} );在这个示例中，onSelect 回调函数会在用户选择一个日期时被触发，它的第一个参数是所选日期的文本格式（例如："2023-04-07"），第二个参数是日期选择器实例的引用。
我们可以将所选日期保存到一个变量中，然后在需要的地方使用它：
-- -------------------- ---- -------
-- ---------- -
--- -------------
-- ------------- --------------
--------- ------------------ ----- -
------------ - ---------
-
---
-- ----------------- -------- ---------- -
---------------- - --------------
---
- --在这个示例中，我们创建了一个保存所选日期的 selectedDate 变量，并将其赋值为用户所选的日期。然后，在点击一个按钮时，会弹出一个对话框，显示所选日期。
指导意义
通过本文介绍的方法，可以轻松地从 jQuery UI datepicker 获取所选日期。同时，也可以根据具体需求，设置不同的日期格式、语言和选项等。但需要注意，如果按照默认设置，日期选择器的日期格式为 MM/DD/YYYY，可能与某些国家或地区的习惯不符，因此在开发中需要进行适当的配置和本地化处理。
总之，熟练掌握 jQuery UI datepicker 的使用，可以提高前端开发的效率和用户体验，也是一个不可或缺的技能点。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- -- ---------- ----------
----- ---------------- -------------------------------------------------------------
------- --------------------------------------------------
------- --------------------------------------------------------
--------
-- ---------- -
--- -------------
-- ------------- --------------
--------- ------------------ ----- -
------------ - ---------
-
---
-- ----------------- -------- ---------- -
---------------- - --------------
---
- --
---------
-------
------
----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------