使用jQuery UI时间滑块时如何新增第二个输入框分开存储起止时间

1. HTML结构调整 #

将原有单个时间输入框替换为两个独立输入框，分别对应开始时间和结束时间，设置独立的name属性方便后端接收后存入对应数据库字段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />

<div class='amount-time-sch'>
<label for="start-time">开始时间</label>
<input type="text" name="start_time" id="start-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00"/>
<label for="end-time" style="margin-left: 12px;">结束时间</label>
<input type="text" name="end_time" id="end-time" style="border: 0; color: #666666; font-weight: bold;" value="20:00"/>
<div id="slider-time"></div><br>
</div>

2. JS逻辑修正与适配 #

首先修复原代码的变量未定义、补零逻辑错误问题，再将计算后的起止时间分别赋值给两个输入框：

jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1440, // 建议修改为1440，对应一天24小时总分钟数，避免出现无效时间
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            // 计算开始时间并补零
            let hours1 = Math.floor(ui.values[0] / 60).toString().padStart(2, '0');
            let minutes1 = (ui.values[0] % 60).toString().padStart(2, '0');
            jQuery('#start-time').val(`${hours1}:${minutes1}`);

            // 计算结束时间并补零
            let hours2 = Math.floor(ui.values[1] / 60).toString().padStart(2, '0');
            let minutes2 = (ui.values[1] % 60).toString().padStart(2, '0');
            jQuery('#end-time').val(`${hours2}:${minutes2}`);
        }
    });
});

补充说明 #

• 两个输入框的name属性start_time、end_time会在表单提交时作为独立参数传输，后端直接对应两个数据库字段存储即可
• 如果需要保留原有合并展示的输入框，只需在HTML中保留原输入框，同时在JS的slide事件中追加合并赋值的逻辑即可，不影响独立输入框的功能

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