本教程详细介绍了如何从 jQuery DateTimePicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue() 方法在特定事件（如表单提交）后按需获取，以及利用 onChangeDateTime 事件处理器实时捕获值的变化。文章将提供清晰的代码示例，并强调不同获取方式的返回值类型及其适用场景，帮助开发者准确有效地处理日期时间数据。
引言
在使用 jquery datetimepicker 插件时，初始化控件以显示日期时间选择界面是第一步，而如何准确地获取用户选定的值则是后续数据处理的关键。本文将基于常见的 html 结构和初始化代码，深入讲解两种主要的获取 datetimepicker 值的方法，并提供相应的代码示例和注意事项。
HTML 结构基础
首先，我们来看一个典型的 DateTimePicker 控件的 HTML 结构。这个结构通常包含一个 input 元素和一个用于触发选择器的按钮。
<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>
在这个结构中：
- id=”reservationdate”：这是包裹整个 DateTimePicker 控件的容器，也是我们通常用来初始化插件的选择器。
- class=”datetimepicker-input”：这个类通常用于标识实际的输入字段。
- data-target=”#reservationdate”：这些属性在 Bootstrap 4 或类似的日期时间选择器插件中很常见，用于将输入框与容器关联起来，确保点击容器或按钮时能正确触发选择器。
DateTimePicker 初始化
在获取值之前，我们需要先对 DateTimePicker 进行初始化。以下是一个基本的初始化示例，其中 format: ‘L’ 表示使用 Moment.js 的本地化日期格式。
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 例如，在美国英语环境下可能是 MM/DD/YYYY // 其他配置项，如 locale, minDate, maxDate 等 }); });
方法一：按需获取值 – 使用 getValue() 方法
当您需要在特定事件（例如表单提交、按钮点击）发生后才获取 DateTimePicker 的值时，getValue() 方法是理想的选择。这种方法是“按需”获取，即只有在明确调用时才会返回当前选定的值。
适用场景
- 表单提交时收集所有输入数据。
- 用户点击“保存”或“查询”按钮时获取选定日期。
- 在其他业务逻辑需要特定时间点的值时。
代码示例
$(function () { // DateTimePicker 初始化 $('#reservationdate').datetimepicker({ format: 'L', }); // 假设您有一个提交按钮 $('#submitButton').on('click', function() { // 调用 getValue() 方法获取日期时间 var selectedDateTime = $('#reservationdate').datetimepicker('getValue'); if (selectedDateTime) { // selectedDateTime 通常是一个 JavaScript Date 对象 console.log("选定的日期时间 (Date 对象):", selectedDateTime); // 如果需要特定格式的字符串，可以使用 Moment.js 或原生 Date 方法进行格式化 // 例如，使用 Moment.js: // var formattedString = moment(selectedDateTime).format('YYYY-MM-DD HH:mm:ss'); // console.log("格式化后的字符串:", formattedString); // 或者使用原生 Date 方法: // var year = selectedDateTime.getFullYear(); // var month = selectedDateTime.getMonth() + 1; // 月份从0开始 // var day = selectedDateTime.getDate(); // console.log("年-月-日:", year + "-" + month + "-" + day); } else { console.log("未选择日期时间"); } }); });
注意事项
- 返回值类型： getValue() 方法通常返回一个 JavaScript Date 对象。如果用户没有选择任何日期时间，它可能会返回 false 或 null，具体取决于插件版本和配置。
- 格式化： getValue() 返回的是 Date 对象，而不是输入框中显示的格式化字符串。如果需要特定格式的字符串，您需要在获取 Date 对象后，使用 Moment.js 或 JavaScript 原生的 Date 对象方法进行二次格式化。
方法二：实时监听值变化 – 使用 onChangeDateTime 事件处理器
当您需要立即响应用户选择的日期时间变化时，onChangeDateTime 事件处理器是更合适的选择。它会在每次日期时间值发生改变时被触发。
适用场景
- 实时验证用户输入的日期时间。
- 根据日期选择动态更新页面内容或执行其他计算。
- 在用户选择日期后立即触发 AJAX 请求。
代码示例
$(function () { $('#reservationdate').datetimepicker({ format: 'L', // 注册 onChangeDateTime 事件处理器 onChangeDateTime: function(dp, $input) { // dp 是插件内部的日期时间对象实例 // $input 是 jQuery 包装的输入框元素 // 获取输入框中显示的格式化字符串 var formattedValue = $input.val(); console.log("实时选定的格式化字符串:", formattedValue); // 获取 JavaScript Date 对象 // 不同的插件版本可能略有差异，常见的获取方式有： // 1. dp.val() // 2. dp.getValue() (如果插件内部提供了这个方法) // 3. dp.data().get() (如果插件内部存储在data中) // 对于 xdsoft.net 的 datetimepicker，dp.val() 或 dp.data().get() 都可以获取 Date 对象 var dateObject = dp.val(); // 假设 dp.val() 返回 Date 对象 if (dateObject instanceof Date && !isNaN(dateObject)) { console.log("实时选定的日期时间 (Date 对象):", dateObject); } else { console.log("未选择或无效日期时间 (Date 对象):", dateObject); } // 可以在此处执行其他逻辑，例如更新UI或发送AJAX请求 // alert("您选择了: " + formattedValue); } }); });
注意事项
- 参数： onChangeDateTime 事件处理器通常接收两个参数：
- dp：代表 DateTimePicker 插件实例本身，可以通过它访问插件的内部方法和属性。
- $input：一个 jQuery 对象，指向实际的输入框 (<input type=”text”>) 元素。
- 返回值类型：
- 通过 $input.val() 可以直接获取输入框中当前显示的、已经根据 format 选项格式化过的字符串。
- 通过 dp.val() (或插件提供的其他方法，如 dp.getValue()) 可以获取一个 JavaScript Date 对象，这与 getValue() 方法的返回值类型一致。
总结与最佳实践
- 选择合适的方法：
- 如果需要在用户完成所有输入或点击某个按钮后一次性获取值，请使用 getValue() 方法。
- 如果需要实时响应用户对日期时间的选择变化，进行即时验证或更新，请使用 onChangeDateTime 事件处理器。
- 理解返回值类型：
- getValue() 方法和 onChangeDateTime 事件中的 dp.val() (或类似方法) 通常返回一个 JavaScript Date 对象。
- onChangeDateTime 事件中的 $input.val() 返回的是根据 format 选项格式化后的字符串。
- 根据您的业务需求，选择获取 Date 对象还是格式化字符串。通常，为了方便后续的计算和比较，获取 Date 对象是更好的实践。
- 格式化处理： 如果您需要特定格式的日期时间字符串，最好在获取 Date 对象后，使用 Moment.js 库（如果已引入）或 JavaScript 原生的 Date 对象方法进行格式化。
- 查阅官方文档： 不同的 DateTimePicker 插件（即使都是 jQuery 插件）可能在方法名、事件参数和行为上存在细微差异。始终建议查阅您所使用的特定插件的官方文档（例如，对于 xdsoft.net 的 DateTimePicker，可以访问其官网文档）以获取最准确的信息。
通过掌握这些方法，您可以灵活高效地从 jQuery DateTimePicker 控件中获取并处理日期时间数据，从而构建功能完善的用户界面。
javascript java jquery html js bootstrap ajax 处理器 app 时间选择器 JavaScript jquery ajax bootstrap html NULL date format 字符串 class 值类型 JS 对象 事件 选择器 input