jQuery Datetimepicker 值获取教程：两种核心方法详解-html教程-PHP中文网

jQuery Datetimepicker 值获取教程：两种核心方法详解

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

理解 jQuery Datetimepicker 的初始化与值获取

jquery datetimepicker 插件是前端开发中常用的日期时间选择工具，它能将普通的文本输入框转换为功能丰富的日期时间选择器。其基本初始化过程通常涉及选择器绑定和配置选项，例如设置日期格式：

$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L', // 设置日期格式，例如 'L' 通常代表本地化短日期格式
    });
});

登录后复制

上述代码片段成功地将 ID 为 reservationdate 的元素初始化为日期时间选择器，并指定了显示格式。然而，仅仅初始化并不能直接获取用户在选择器中选定的日期时间值。为了在应用程序中利用这些值，我们需要明确的方法来提取它们。本教程将介绍两种核心的获取值策略。

方法一：使用 getValue API 方法

当您需要在特定时刻（例如用户点击“保存”按钮、提交表单或执行其他操作时）获取日期时间选择器当前选定的值时，getValue 方法是理想的选择。此方法允许您按需查询选择器的状态。

实现细节

对于 xdsoft.net 版本的 jQuery Datetimepicker 插件，可以通过直接调用 datetimepicker 方法并传入 'getValue' 字符串来获取值。该方法通常返回一个 JavaScript Date 对象，代表了当前选定的日期和时间。

// 假设 datetimepicker 已经初始化
var selectedDate = $('#reservationdate').datetimepicker('getValue');

登录后复制

示例代码

以下示例演示了如何结合一个按钮点击事件来获取并显示选定的日期：

<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" class="btn btn-primary mt-2">获取选定日期</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- 假设您使用的是 xdsoft.net datetimepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<script>
    $(function () {
        // 初始化 datetimepicker
        $('#reservationdate').datetimepicker({
            format: 'L', // 例如：'MM/DD/YYYY' 或 'YYYY-MM-DD'
            timepicker: false // 如果只需要日期
        });

        // 绑定按钮点击事件
        $('#getDateTimeBtn').on('click', function() {
            var selectedDate = $('#reservationdate').datetimepicker('getValue');

            if (selectedDate instanceof Date && !isNaN(selectedDate)) {
                // selectedDate 是一个有效的 Date 对象
                alert("选中的日期 (Date 对象): " + selectedDate.toLocaleDateString());
                console.log("选中的日期 (Date 对象):", selectedDate);
            } else {
                // 如果没有选择日期，或者 getValue 返回 null/undefined/invalid Date
                alert("请选择一个日期。");
            }
        });
    });
</script>

登录后复制

注意事项

返回值类型： 对于 xdsoft.net 插件，getValue() 通常返回一个 Date 对象。如果您需要特定格式的字符串，可以进一步使用 moment.js 或原生的 Date 对象方法（如 toLocaleDateString()）进行格式化。
空值处理： 在调用 getValue() 后，务必检查返回的值是否有效（例如，selectedDate instanceof Date && !isNaN(selectedDate)），以避免在用户未选择日期时出现错误。

方法二：利用 onChangeDateTime 事件实时监听

当您需要实时响应日期时间选择器值的变化时，例如即时更新其他页面元素、进行动态验证或触发后续操作，onChangeDateTime 事件回调函数是最佳选择。

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

查看详情

实现细节

onChangeDateTime 是 datetimepicker 初始化选项中的一个回调函数。它会在用户每次更改日期或时间时被触发。此回调函数接收两个参数：dp（datetimepicker 实例对象）和 $input（绑定 datetimepicker 的 jQuery 输入框元素）。

$('#reservationdate').datetimepicker({
  format: 'L',
  onChangeDateTime: function(dp, $input){
    // 在这里处理日期时间变化
  }
});

登录后复制

示例代码

<div class="form-group">
    <label>日期:</label>
    <div class="input-group date" id="reservationdate_onchange" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate_onchange" />
        <div class="input-group-append" data-target="#reservationdate_onchange" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>
<p class="mt-2">当前选定日期：<span id="displaySelectedDate">未选择</span></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<script>
    $(function () {
        $('#reservationdate_onchange').datetimepicker({
            format: 'L', // 例如：'MM/DD/YYYY'
            timepicker: false,
            onChangeDateTime: function(dp, $input){
                // dp: datetimepicker 实例对象
                // $input: 绑定 datetimepicker 的 jQuery 输入框元素

                var selectedString = $input.val(); // 获取输入框中格式化后的字符串值
                var selectedDateObject = dp.getValue(); // 获取 Date 对象

                console.log("输入框字符串值:", selectedString);
                console.log("Date 对象值:", selectedDateObject);

                // 更新页面显示
                if (selectedString) {
                    $('#displaySelectedDate').text(selectedString);
                } else {
                    $('#displaySelectedDate').text("未选择");
                }

                // 可以在这里执行其他逻辑，例如进行验证或触发API调用
                // alert("日期已更新为: " + selectedString);
            }
        });
    });
</script>

登录后复制

参数详解

dp：datetimepicker 实例对象。通过此对象，您可以调用插件提供的其他方法，例如 dp.getValue() 来获取当前的 Date 对象。
$input：一个 jQuery 对象，代表了绑定 datetimepicker 的 <input type="text"> 元素。您可以通过 $input.val() 直接获取输入框中当前格式化后的字符串值。

注意事项

性能考量： onChangeDateTime 事件会频繁触发，因此避免在其中执行过于复杂的或耗时的操作，以免影响用户界面的响应速度。
值来源： 您可以根据需求选择从 $input.val() 获取格式化字符串，或者从 dp.getValue() 获取原始的 Date 对象。

综合考量与最佳实践

在选择获取日期时间值的方法时，请考虑以下几点：

插件兼容性： 本教程基于 xdsoft.net 版本的 jQuery Datetimepicker 插件。请注意，其他 jQuery 日期时间插件（如 Tempus Dominus Bootstrap 4/5、Bootstrap Datepicker 等）可能具有不同的 API 和事件名称。在实际项目中，请查阅您所使用的具体插件的官方文档。
值类型处理： 明确您的应用程序需要 Date 对象还是格式化后的字符串。getValue() 通常返回 Date 对象，而直接读取输入框的 value 属性或 onChangeDateTime 中 $input.val() 则提供格式化字符串。根据后端API或前端处理需求进行适当转换。
用户体验：
- 如果只需在表单提交时获取最终值，getValue() 方法配合提交事件是简洁高效的选择。
- 如果需要即时反馈或联动更新，onChangeDateTime 事件则能提供更流畅的用户体验。
表单提交： 在表单提交时，<input> 元素的 name 属性至关重要。即使使用了 datetimepicker，最终提交的仍然是 <input> 元素的 value。确保该 value 属性包含您希望提交的日期时间字符串。

总结

掌握从 jQuery Datetimepicker 中获取值的方法是高效开发的关键。通过 getValue API 方法，您可以在特定事件点按需获取日期时间值，适用于表单提交或按钮点击等场景。而 onChangeDateTime 事件则提供了实时监听和响应日期时间变化的能力，适用于需要即时反馈和动态更新的交互。根据您的具体业务需求和用户体验目标，选择最合适的策略，将使您的日期时间选择器功能更加强大和灵活。

以上就是jQuery Datetimepicker 值获取教程：两种核心方法详解的详细内容，更多请关注php中文网其它相关文章！