获取 jQuery DateTimePicker 选定值的实用指南-html教程-PHP中文网

获取 jQuery DateTimePicker 选定值的实用指南

本教程详细介绍了如何从 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 事件。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

语法：

将 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 插件的文档。如果使用其他插件，请查阅其官方文档以确认方法名称和参数。