本教程详细介绍了如何从 jQuery DateTimePicker 插件中获取用户选定的日期和时间值。我们将探讨两种主要方法：通过调用 getValue 方法在特定事件触发时获取，以及利用 onChangeDateTime 事件在值发生变化时实时获取。文章将提供代码示例和使用场景，帮助开发者高效地集成和利用 DateTimePicker 的功能。
jQuery DateTimePicker 插件简介与初始化
jquery datetimepicker 是一个广泛使用的日期时间选择器插件，它允许用户通过友好的界面选择日期和时间，并将其填充到输入框中。在实际应用中，获取用户通过此插件选择的值是常见的需求。
以下是用户提供的 HTML 结构和基本的 JavaScript 初始化代码：
HTML 结构：
JavaScript 初始化：
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 示例格式，表示本地化的日期格式 });});
在这段代码中，datetimepicker 插件被初始化在 ID 为 reservationdate 的 div 容器上。format: ‘L’ 定义了日期显示的格式。一旦初始化完成，用户就可以通过点击图标或输入框来选择日期。接下来，我们将介绍如何获取用户选择的日期值。
方法一：使用 getValue 方法获取选定值
最直接且常用的方法是在需要获取值时（例如，用户点击“提交”按钮或执行某个操作时）调用 datetimepicker 实例的 getValue 方法。
语法：
$('#reservationdate').datetimepicker('getValue');
使用场景：这种方法适用于当用户完成日期选择，并且需要将最终值用于表单提交、数据处理或异步请求等场景。
示例：
假设我们有一个按钮，当点击该按钮时，需要获取 datetimepicker 中当前选定的日期。
HTML (添加一个按钮):
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 (添加一个用于显示实时值的元素):
实时显示选定日期: 未选择日期
在这个示例中，每次用户选择日期或时间，onChangeDateTime 事件都会被触发，并将选定的值更新到 displaySelectedDate 元素中。
方法三：直接读取关联输入框的值
由于 datetimepicker 插件会将选定的日期时间值写入到与之关联的 元素中，因此在某些情况下，也可以直接读取该输入框的 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 插件中获取用户选定的日期和时间值，从而更好地集成和利用这一强大的前端组件。
以上就是获取 jQuery DateTimePicker 选定值的实用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575453.html
微信扫一扫 
支付宝扫一扫 
