本教程详细介绍了如何从 jQuery DateTimePicker 插件中获取用户选定的日期和时间值。我们将探讨两种主要方法：通过调用 getValue 方法在特定事件触发时获取，以及利用 onChangeDateTime 事件在值发生变化时实时获取。文章将提供代码示例和使用场景，帮助开发者高效地集成和利用 DateTimePicker 的功能。
jQuery DateTimePicker 插件简介与初始化
jquery datetimepicker 是一个广泛使用的日期时间选择器插件，它允许用户通过友好的界面选择日期和时间，并将其填充到输入框中。在实际应用中，获取用户通过此插件选择的值是常见的需求。
以下是用户提供的 HTML 结构和基本的 JavaScript 初始化代码：
HTML 结构：
<div class="form-group"> <label>Date:</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>
JavaScript 初始化：
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 示例格式，表示本地化的日期格式 }); });
在这段代码中，datetimepicker 插件被初始化在 ID 为 reservationdate 的 div 容器上。format: ‘L’ 定义了日期显示的格式。一旦初始化完成，用户就可以通过点击图标或输入框来选择日期。接下来，我们将介绍如何获取用户选择的日期值。
方法一：使用 getValue 方法获取选定值
最直接且常用的方法是在需要获取值时（例如，用户点击“提交”按钮或执行某个操作时）调用 datetimepicker 实例的 getValue 方法。
语法：
$('#reservationdate').datetimepicker('getValue');
使用场景： 这种方法适用于当用户完成日期选择，并且需要将最终值用于表单提交、数据处理或异步请求等场景。
示例：
假设我们有一个按钮，当点击该按钮时，需要获取 datetimepicker 中当前选定的日期。
HTML (添加一个按钮):
<div class="form-group"> <label>Date:</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="getValueBtn" class="btn btn-primary mt-2">获取选定日期</button>
JavaScript：
$(function () { // 初始化 datetimepicker $('#reservationdate').datetimepicker({ format: 'L', }); // 绑定按钮点击事件 $('#getValueBtn').on('click', function() { // 获取 datetimepicker 的值 var selectedDate = $('#reservationdate').datetimepicker('getValue'); if (selectedDate) { alert('当前选定的日期是: ' + selectedDate.toLocaleString()); // getValue 返回的是 Date 对象 console.log('Date对象:', selectedDate); } else { alert('未选择任何日期。'); } }); });
注意： getValue() 方法返回的是一个 JavaScript Date 对象。如果需要特定格式的字符串，可以对 Date 对象进行格式化处理，或者在 datetimepicker 初始化时设置 format 选项，然后直接读取输入框的值（见方法三）。
方法二：利用 onChangeDateTime 事件实时获取选定值
如果你需要在用户每次选择或更改日期时间时立即执行某个操作（例如，实时更新页面上的其他元素），可以使用 datetimepicker 提供的 onChangeDateTime 事件。
语法：
将 onChangeDateTime 回调函数添加到 datetimepicker 的初始化配置中。
$('#reservationdate').datetimepicker({ format: 'L', onChangeDateTime: function(dp, $input){ // dp: datetimepicker 实例对象 // $input: 与 datetimepicker 关联的 jQuery 输入元素 // 在这里执行当日期时间变化时需要进行的操作 } });
使用场景： 适用于需要实时响应日期时间变化的场景，例如：
- 根据选定的日期动态加载数据。
- 实时校验日期范围。
- 更新显示选定日期的其他文本。
示例：
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 注册 onChangeDateTime 事件 onChangeDateTime: function(dp, $input){ // $input.val() 可以直接获取当前输入框中的格式化字符串值 var selectedDateString = $input.val(); console.log("onChangeDateTime 事件触发 - 格式化字符串值:", selectedDateString); // dp.getValue() 也可以获取 Date 对象 var selectedDateObject = dp.getValue(); if (selectedDateObject) { console.log("onChangeDateTime 事件触发 - Date对象:", selectedDateObject.toLocaleString()); // 可以在这里更新页面上的其他元素 $('#displaySelectedDate').text('您选择了: ' + selectedDateString); } else { $('#displaySelectedDate').text('未选择日期'); } } }); });
HTML (添加一个用于显示实时值的元素):
<div class="form-group"> <label>Date:</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 class="mt-2">实时显示选定日期: <strong id="displaySelectedDate">未选择日期</strong></p>
在这个示例中，每次用户选择日期或时间，onChangeDateTime 事件都会被触发，并将选定的值更新到 displaySelectedDate 元素中。
方法三：直接读取关联输入框的值
由于 datetimepicker 插件会将选定的日期时间值写入到与之关联的 <input type=”text”> 元素中，因此在某些情况下，也可以直接读取该输入框的 value 属性来获取值。
语法：
// 方式一：通过 data-target 属性找到输入框 $('input[data-target="#reservationdate"]').val(); // 方式二：通过 ID 容器找到内部的输入框 $('#reservationdate').find('.datetimepicker-input').val();
使用场景： 当 datetimepicker 已经将值写入输入框，并且你只需要获取输入框中显示的格式化字符串时，可以直接使用此方法。例如，在表单提交前，如果输入框是表单的一部分，其 name 属性会确保值被正确提交。
示例：
$(function () { $('#reservationdate').datetimepicker({ format: 'L', }); $('#getValueBtn').on('click', function() { // 直接读取输入框的值 var selectedDateString = $('input[data-target="#reservationdate"]').val(); if (selectedDateString) { alert('通过直接读取输入框获取的值: ' + selectedDateString); } else { alert('输入框中没有日期值。'); } }); });
注意事项：
- 这种方法获取的是字符串格式的值，其格式取决于 datetimepicker 的 format 配置。
- 在 datetimepicker 尚未完全初始化或用户未进行任何选择时，输入框可能为空，或者包含默认值。
- 推荐在需要 Date 对象进行进一步日期时间计算时使用 getValue() 方法；如果只需要格式化字符串，则可以直接读取输入框值或使用 onChangeDateTime 事件中的 $input.val()。
注意事项与最佳实践
- 确保插件正确初始化： 在尝试获取值之前，务必确认 datetimepicker 插件已经正确加载并初始化到目标元素上。
- 理解 format 选项： datetimepicker 的 format 选项决定了日期时间在输入框中显示的格式。getValue() 返回 Date 对象，与 format 无关；而 $input.val() 返回的是经过 format 格式化后的字符串。
- 选择合适的获取方法：
- 需要 Date 对象进行日期时间计算或比较时，首选 getValue()。
- 需要实时响应用户选择并更新界面时，使用 onChangeDateTime 事件。
- 仅需获取输入框中显示的格式化字符串时，可以直接读取输入框的 value。
- 处理空值情况： 用户可能没有选择任何日期。在获取值后，务必检查返回的值是否为空或 null，以避免潜在的错误。
- 插件版本兼容性： 不同的 datetimepicker 插件（例如 xdsoft.net/jqplugins/datetimepicker、Tempus Dominus Bootstrap 4 等）可能有不同的 API。本教程基于常见的 xdsoft.net 插件的文档。如果使用其他插件，请查阅其官方文档以确认方法名称和参数。
通过掌握上述方法，您可以灵活高效地从 jQuery DateTimePicker 插件中获取用户选定的日期和时间值，从而更好地集成和利用这一强大的前端组件。
javascript java jquery html 前端 bootstrap app 时间选择器 点击事件 表单提交 JavaScript jquery bootstrap html NULL date format 回调函数 字符串 对象 事件 异步 选择器 input