引言
jQuery Datetimepicker 是一个功能强大且易于使用的日期时间选择插件，广泛应用于网页表单中。在实际开发中，除了正确初始化和显示日期时间选择器外，如何准确地获取用户选定的日期时间值是核心需求。本教程将深入探讨两种主要的获取值的方法，并提供详细的代码示例和使用建议。
HTML 结构与基本初始化
首先，我们来看一个典型的 HTML 结构，它包含了一个用于日期选择的输入框和相关的 Datetimepicker 初始化代码。
对应的 jQuery Datetimepicker 初始化代码如下：
$(function () {
$('#reservationdate').datetimepicker({
format: 'L', // 'L' 通常表示本地化的日期格式，例如 MM/DD/YYYY
});
});这段代码成功地将 id="reservationdate" 的元素初始化为日期时间选择器。接下来，我们将介绍如何获取用户通过此选择器选定的值。
方法一：通过 getValue() 方法获取值
在许多场景下，我们不需要实时获取日期，而是在用户完成选择后，例如点击提交按钮时，才获取最终的日期值。这时，可以使用 Datetimepicker 实例提供的 getValue() 方法。
getValue() 方法会返回一个 JavaScript Date 对象，或者如果未选择任何日期，则返回 null。
示例代码：
假设我们有一个按钮，点击时获取选定的日期。
在这个例子中，当用户点击“获取选定日期”按钮时，getValue() 方法会被调用，并返回一个 Date 对象。你可以根据需要进一步处理这个 Date 对象。
方法二：利用 onChangeDateTime 事件实时获取值
如果你需要在日期时间选择器中的值发生变化时立即执行某些操作，例如实时验证或更新其他元素，那么 onChangeDateTime 事件是一个理想的选择。
onChangeDateTime 是 Datetimepicker 初始化选项中的一个回调函数，当日期时间值改变时会被触发。它接收两个参数：dp（Datetimepicker 实例）和 $input（当前输入框的 jQuery 对象）。
示例代码：
当前选定日期: 未选择
在这个示例中，每当用户通过 Datetimepicker 选择或更改日期时，onChangeDateTime 函数就会被调用。在回调函数内部，$input.val() 可以获取到输入框中当前显示的、经过格式化后的日期字符串。
重要注意事项
-
返回值类型差异：
- $('#element').datetimepicker('getValue') 返回的是一个 JavaScript Date 对象（或 null）。
- $input.val()（在 onChangeDateTime 中或直接通过 jQuery 获取）返回的是一个根据 format 选项格式化后的日期字符串。根据你的需求选择合适的方法。
日期格式 (format)： format 选项决定了日期在输入框中显示的格式，也间接影响了 $input.val() 返回的字符串形式。例如，'L' 是本地化日期格式，而 'YYYY-MM-DD' 则会以 2023-10-26 的形式显示和返回。
兼容性与文档： 不同的 jQuery Datetimepicker 插件可能在 API 上略有差异。本教程基于 xdsoft.net/jqplugins/datetimepicker 插件的常见用法。在实际项目中，请务必查阅你所使用的特定插件的官方文档，以获取最准确和最新的信息。
Date 对象处理： 如果你获取到的是 Date 对象，可以通过其提供的方法（如 getFullYear(), getMonth(), getDate(), toISOString() 等）进行进一步的操作和格式化。
总结
获取 jQuery Datetimepicker 的选定值主要有两种策略：
- 延迟获取： 使用 $('#element').datetimepicker('getValue') 在特定事件（如表单提交）触发时获取 Date 对象。
- 实时监听： 在初始化时配置 onChangeDateTime 回调函数，通过 $input.val() 实时获取格式化后的日期字符串。
理解这两种方法的区别及其返回值的类型，将帮助你更灵活、高效地在项目中集成和使用 jQuery Datetimepicker。选择哪种方法取决于你的具体业务需求和交互逻辑。
