jQuery Datetimepicker 值获取指南：两种实用方法-html教程-PHP中文网

jQuery Datetimepicker 值获取指南：两种实用方法

霞舞

发布： 2025-09-12 15:43:00

原创

506人浏览过

jquery datetimepicker 值获取指南：两种实用方法

本教程详细介绍了如何从 jQuery Datetimepicker 控件中获取用户选定的日期时间值。我们将探讨两种主要方法：通过调用 getValue() 方法在特定事件（如表单提交）中获取，以及利用 onChangeDateTime 事件实时捕获值。文章将提供清晰的代码示例和注意事项，帮助开发者高效地集成和使用此功能。

引言

jQuery Datetimepicker 是一个功能强大且易于使用的日期时间选择插件，广泛应用于网页表单中。在实际开发中，除了正确初始化和显示日期时间选择器外，如何准确地获取用户选定的日期时间值是核心需求。本教程将深入探讨两种主要的获取值的方法，并提供详细的代码示例和使用建议。

HTML 结构与基本初始化

首先，我们来看一个典型的 HTML 结构，它包含了一个用于日期选择的输入框和相关的 Datetimepicker 初始化代码。

<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>

登录后复制

对应的 jQuery Datetimepicker 初始化代码如下：

$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L', // 'L' 通常表示本地化的日期格式，例如 MM/DD/YYYY
    });
});

登录后复制

这段代码成功地将 id="reservationdate" 的元素初始化为日期时间选择器。接下来，我们将介绍如何获取用户通过此选择器选定的值。

方法一：通过 getValue() 方法获取值

在许多场景下，我们不需要实时获取日期，而是在用户完成选择后，例如点击提交按钮时，才获取最终的日期值。这时，可以使用 Datetimepicker 实例提供的 getValue() 方法。

getValue() 方法会返回一个 JavaScript Date 对象，或者如果未选择任何日期，则返回 null。

示例代码：

假设我们有一个按钮，点击时获取选定的日期。

<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>
<button id="getDateTimeBtn">获取选定日期</button>

<script>
$(function () {
    // 初始化 Datetimepicker
    $('#reservationdate').datetimepicker({
        format: 'L',
    });

    // 绑定按钮点击事件
    $('#getDateTimeBtn').on('click', function() {
        // 调用 getValue() 方法获取 Date 对象
        var selectedDate = $('#reservationdate').datetimepicker('getValue');

        if (selectedDate) {
            // selectedDate 是一个 Date 对象
            console.log("选定的日期 (Date 对象):", selectedDate);
            // 如果需要格式化后的字符串，可以通过 Date 对象的方法进行处理
            alert("选定的日期: " + selectedDate.toLocaleDateString());
        } else {
            alert("未选择日期");
        }
    });
});
</script>

登录后复制

在这个例子中，当用户点击“获取选定日期”按钮时，getValue() 方法会被调用，并返回一个 Date 对象。你可以根据需要进一步处理这个 Date 对象。

方法二：利用 onChangeDateTime 事件实时获取值

如果你需要在日期时间选择器中的值发生变化时立即执行某些操作，例如实时验证或更新其他元素，那么 onChangeDateTime 事件是一个理想的选择。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

onChangeDateTime 是 Datetimepicker 初始化选项中的一个回调函数，当日期时间值改变时会被触发。它接收两个参数：dp（Datetimepicker 实例）和 $input（当前输入框的 jQuery 对象）。

示例代码：

<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>
<p>当前选定日期: <span id="displayDate">未选择</span></p>

<script>
$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L',
        // 定义 onChangeDateTime 回调函数
        onChangeDateTime: function(dp, $input){
            var selectedValue = $input.val(); // 获取输入框中格式化后的字符串值
            console.log("日期已更改 (字符串):", selectedValue);
            $('#displayDate').text(selectedValue); // 实时更新显示
        }
    });
});
</script>

登录后复制

在这个示例中，每当用户通过 Datetimepicker 选择或更改日期时，onChangeDateTime 函数就会被调用。在回调函数内部，$input.val() 可以获取到输入框中当前显示的、经过格式化后的日期字符串。

重要注意事项

返回值类型差异：
- $('#element').datetimepicker('getValue') 返回的是一个 JavaScript Date 对象（或 null）。
- $input.val()（在 onChangeDateTime 中或直接通过 jQuery 获取）返回的是一个根据 format 选项格式化后的日期字符串。根据你的需求选择合适的方法。
日期格式 (format)： format 选项决定了日期在输入框中显示的格式，也间接影响了 $input.val() 返回的字符串形式。例如，'L' 是本地化日期格式，而 'YYYY-MM-DD' 则会以 2023-10-26 的形式显示和返回。
兼容性与文档： 不同的 jQuery Datetimepicker 插件可能在 API 上略有差异。本教程基于 xdsoft.net/jqplugins/datetimepicker 插件的常见用法。在实际项目中，请务必查阅你所使用的特定插件的官方文档，以获取最准确和最新的信息。
Date 对象处理： 如果你获取到的是 Date 对象，可以通过其提供的方法（如 getFullYear(), getMonth(), getDate(), toISOString() 等）进行进一步的操作和格式化。

总结

获取 jQuery Datetimepicker 的选定值主要有两种策略：

延迟获取： 使用 $('#element').datetimepicker('getValue') 在特定事件（如表单提交）触发时获取 Date 对象。
实时监听： 在初始化时配置 onChangeDateTime 回调函数，通过 $input.val() 实时获取格式化后的日期字符串。

理解这两种方法的区别及其返回值的类型，将帮助你更灵活、高效地在项目中集成和使用 jQuery Datetimepicker。选择哪种方法取决于你的具体业务需求和交互逻辑。

以上就是jQuery Datetimepicker 值获取指南：两种实用方法的详细内容，更多请关注php中文网其它相关文章！