本教程详细介绍了如何从 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 插件中获取用户选定的日期和时间值，从而更好地集成和利用这一强大的前端组件。
评论（已关闭）
评论已关闭