本教程详细介绍了如何从 jQuery Datetimepicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue() 方法在特定事件（如表单提交）中获取，以及利用 onChangeDateTime 事件实时捕获值。文章将提供清晰的代码示例和注意事项，帮助开发者高效地集成和使用此功能。
引言
jQuery Datetimepicker 是一个功能强大且易于使用的日期时间选择插件，广泛应用于网页表单中。在实际开发中，除了正确初始化和显示日期时间选择器外，如何准确地获取用户选定的日期时间值是核心需求。本教程将深入探讨两种主要的获取值的方法，并提供详细的代码示例和使用建议。
HTML 结构与基本初始化
首先，我们来看一个典型的 HTML 结构，它包含了一个用于日期选择的输入框和相关的 Datetimepicker 初始化代码。
<div class="form-group"> <label>日期:</label> <div class="input-group date" id="reservationdate" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" /> <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> </div>
对应的 jQuery Datetimepicker 初始化代码如下：
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 'L' 通常表示本地化的日期格式，例如 MM/DD/YYYY }); });
这段代码成功地将 id=”reservationdate” 的元素初始化为日期时间选择器。接下来，我们将介绍如何获取用户通过此选择器选定的值。
方法一：通过 getValue() 方法获取值
在许多场景下，我们不需要实时获取日期，而是在用户完成选择后，例如点击提交按钮时，才获取最终的日期值。这时，可以使用 Datetimepicker 实例提供的 getValue() 方法。
getValue() 方法会返回一个 JavaScript Date 对象，或者如果未选择任何日期，则返回 null。
示例代码：
假设我们有一个按钮，点击时获取选定的日期。
<div class="form-group"> <label>日期:</label> <div class="input-group date" id="reservationdate" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" /> <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> </div> <button id="getDateTimeBtn">获取选定日期</button> <script> $(function () { // 初始化 Datetimepicker $('#reservationdate').datetimepicker({ format: 'L', }); // 绑定按钮点击事件 $('#getDateTimeBtn').on('click', function() { // 调用 getValue() 方法获取 Date 对象 var selectedDate = $('#reservationdate').datetimepicker('getValue'); if (selectedDate) { // selectedDate 是一个 Date 对象 console.log("选定的日期 (Date 对象):", selectedDate); // 如果需要格式化后的字符串，可以通过 Date 对象的方法进行处理 alert("选定的日期: " + selectedDate.toLocaleDateString()); } else { alert("未选择日期"); } }); }); </script>
在这个例子中，当用户点击“获取选定日期”按钮时，getValue() 方法会被调用，并返回一个 Date 对象。你可以根据需要进一步处理这个 Date 对象。
方法二：利用 onChangeDateTime 事件实时获取值
如果你需要在日期时间选择器中的值发生变化时立即执行某些操作，例如实时验证或更新其他元素，那么 onChangeDateTime 事件是一个理想的选择。
onChangeDateTime 是 Datetimepicker 初始化选项中的一个回调函数，当日期时间值改变时会被触发。它接收两个参数：dp（Datetimepicker 实例）和 $input（当前输入框的 jQuery 对象）。
示例代码：
<div class="form-group"> <label>日期:</label> <div class="input-group date" id="reservationdate" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" /> <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> </div> <p>当前选定日期: <span id="displayDate">未选择</span></p> <script> $(function () { $('#reservationdate').datetimepicker({ format: 'L', // 定义 onChangeDateTime 回调函数 onChangeDateTime: function(dp, $input){ var selectedValue = $input.val(); // 获取输入框中格式化后的字符串值 console.log("日期已更改 (字符串):", selectedValue); $('#displayDate').text(selectedValue); // 实时更新显示 } }); }); </script>
在这个示例中，每当用户通过 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。选择哪种方法取决于你的具体业务需求和交互逻辑。
javascript java jquery html app 区别 时间选择器 点击事件 表单提交 yy JavaScript jquery html NULL date format 回调函数 字符串 值类型 对象 事件 选择器 input