如何使用jQuery为datetime-local输入框的时间增加2小时？

AI 小北

2026-8-13

实现datetime-local输入框自动追加2小时功能

我有两个datetime-local类型的输入框：

id为DeliveryTime的输入框支持用户修改
id为DeliveryTimeEnd的输入框为只读状态

需求是：当DeliveryTime的时间发生变更时，自动将DeliveryTimeEnd的时间设置为前者的时间加2小时。

原尝试代码

HTML结构

<input class="form-control" type="datetime-local" name="deliveryTime" id="DeliveryTime" required>
<input class="form-control" type="datetime-local" name="deliveryTimeEnd" id="DeliveryTimeEnd" readonly>

jQuery代码

$("#DeliveryTime").on("change", function() {
    var startTime = $("#DeliveryTime").val();
    startTime.setHours(startTime.getHours()+2);
    alert(startTime);
    $("#DeliveryTimeEnd").val(startTime);
});

问题分析

原代码的核心问题是：$("#DeliveryTime").val()返回的是字符串格式的时间值（例如"2024-05-20T14:30"），并非Date对象，因此直接调用setHours()方法会触发错误——字符串没有该方法。

修正后的代码

$("#DeliveryTime").on("change", function() {
    // 获取当前输入的时间字符串
    const startTimeStr = $(this).val();
    // 若输入为空，直接返回避免报错
    if (!startTimeStr) return;

    // 将字符串转为Date对象
    const startTime = new Date(startTimeStr);
    // 给时间增加2小时
    startTime.setHours(startTime.getHours() + 2);

    // 把Date对象转为datetime-local要求的格式（YYYY-MM-DDTHH:mm）
    const endTimeStr = startTime.toISOString().slice(0, 16);

    // 设置到只读输入框中
    $("#DeliveryTimeEnd").val(endTimeStr);
});