如何将时间格式设为hh:mm:ss并自动为结束时间增加15分钟

核心实现逻辑 #

• 两个时间输入框统一配置为HH:mm:ss格式，匹配需求的hh:mm:ss标准输出规则，通过开启秒选择项、调整时间格式参数，保证选择和输出的时间值带完整秒位
• 为开始时间选择器绑定选中回调，将用户选中的开始时间转换为可计算的时间对象，叠加15分钟时长后，重新格式化为标准时间字符串，直接赋值给只读的结束时间输入框，无需用户手动选择

可直接复用的初始化代码 #

// 等待页面DOM加载完成后执行初始化
$(function () {
    // 两个选择器共用的基础配置
    const baseTimepickerConfig = {
        timeFormat: 'HH:mm:ss', // 统一24小时制 时:分:秒 格式
        showSeconds: true, // 开启秒级选择，保证格式支持秒位输出
    };

    // 初始化开始时间输入框的时间选择器
    $('#start_time').timepicker({
        ...baseTimepickerConfig,
        // 绑定时间选中完成的回调，触发联动逻辑
        onSelect: function (selectedStartTime) {
            // 拼接固定基准日期解析选中时间，规避浏览器时间字符串兼容问题
            const startDate = new Date(`1970-01-01 ${selectedStartTime}`);
            // 在开始时间基础上顺延15分钟
            startDate.setMinutes(startDate.getMinutes() + 15);
            // 格式化计算后的时间，保证每一位都是两位数字
            const formatPart = (num) => String(num).padStart(2, '0');
            const finishTime = [
                formatPart(startDate.getHours()),
                formatPart(startDate.getMinutes()),
                formatPart(startDate.getSeconds())
            ].join(':');
            // 给只读的结束时间输入框赋值
            $('#finish_time').val(finishTime);
        }
    });

    // 初始化结束时间输入框的时间选择器
    $('#finish_time').timepicker({
        ...baseTimepickerConfig,
        disableTextInput: true // 匹配输入框readonly属性，禁止点击弹出选择弹窗
    });
});

实现细节说明 #

• 时间计算环节采用固定基准日期拼接选中时间的方式，避免部分浏览器无法直接解析HH:mm:ss格式时间字符串的兼容问题，保证15分钟偏移量计算准确
• 格式化环节通过padStart(2, '0')补零，确保单值的时、分、秒（比如9点3分2秒）会输出为09:03:02，完全符合hh:mm:ss的两位数字格式要求
• 结束时间输入框的选择器配置增加了disableTextInput参数，和原代码中设置的readonly属性体验对齐，避免用户点击输入框时意外弹出时间选择弹窗，不影响表单正常提交的取值逻辑

内容的提问来源于stack exchange，提问作者Markski Kun