引言
在使用 jquery datetimepicker 插件时，初始化控件以显示日期时间选择界面是第一步，而如何准确地获取用户选定的值则是后续数据处理的关键。本文将基于常见的 html 结构和初始化代码，深入讲解两种主要的获取 datetimepicker 值的方法，并提供相应的代码示例和注意事项。
HTML 结构基础
首先，我们来看一个典型的 DateTimePicker 控件的 HTML 结构。这个结构通常包含一个 input 元素和一个用于触发选择器的按钮。
在这个结构中：
- 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.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 控件中获取并处理日期时间数据，从而构建功能完善的用户界面。
