jQuery Timepicker onChange事件更新字段时值被覆盖问题求助

我遇过类似的情况，这个插件的事件触发时机确实有点坑——changeTime事件是在插件把显示格式的值写入输入框之前触发的，所以你当时修改的值转眼就被覆盖了。给你两个靠谱的解决方案，都不用改插件或后端代码：

方案一：用隐藏输入框分离显示与提交值（推荐） #

这个方法最稳妥，完全避免了事件时机的冲突，还能保证用户看到的是易读格式，提交的是后端需要的HH:MM:SS格式。

步骤： #

1. 在页面上放两个输入框：一个可见（用于用户选择/查看时间），一个隐藏（用于存储提交格式的值）
2. 给可见输入框初始化timepicker，设置易读的显示格式
3. 绑定changeTime事件，把选择的时间转换成HH:MM:SS格式后写入隐藏输入框
4. 表单提交时，提交隐藏输入框的值（给它设置正确的name属性）

代码示例： #

<!-- 可见输入框：显示易读时间 -->
<input type="text" id="time-display" class="timepicker">
<!-- 隐藏输入框：存储提交格式，name对应后端接收字段 -->
<input type="hidden" id="time-submit" name="event_time">

// 初始化timepicker，设置易读显示格式（比如 9:30 AM 这种）
$('#time-display').timepicker({
  timeFormat: 'g:i A',
  // 可选：限制时间范围等其他配置
  minTime: '8:00am',
  maxTime: '6:00pm'
});

// 绑定时间改变事件，更新隐藏输入框的值
$('#time-display').on('changeTime', function() {
  // 获取插件返回的Date对象，直接用它来转换格式更可靠
  const selectedTime = $(this).timepicker('getTime');
  
  // 转换为HH:MM:SS格式
  const hours = String(selectedTime.getHours()).padStart(2, '0');
  const minutes = String(selectedTime.getMinutes()).padStart(2, '0');
  const seconds = String(selectedTime.getSeconds()).padStart(2, '0');
  const submitFormat = `${hours}:${minutes}:${seconds}`;
  
  // 写入隐藏输入框
  $('#time-submit').val(submitFormat);
});

这样用户操作时看到的始终是友好的格式，表单提交的却是后端需要的HH:MM:SS，完美分离，也不会有事件覆盖的问题。

方案二：表单提交时临时转换格式（适合不想加额外输入框的场景） #

如果你不想新增隐藏输入框，可以在表单提交的瞬间把输入框的值转换成提交格式，提交后再恢复显示格式。这种方式要注意避免用户在提交过程中看到格式变化：

代码示例： #

const timeInput = $('#time-input');

// 初始化timepicker，设置易读格式
timeInput.timepicker({
  timeFormat: 'g:i A'
});

// 绑定表单提交事件
$('form').on('submit', function(e) {
  // 获取选择的时间对象
  const selectedTime = timeInput.timepicker('getTime');
  // 转换为HH:MM:SS格式
  const submitFormat = `${String(selectedTime.getHours()).padStart(2, '0')}:${String(selectedTime.getMinutes()).padStart(2, '0')}:${String(selectedTime.getSeconds()).padStart(2, '0')}`;
  
  // 保存原始显示值，提交后恢复
  const originalDisplay = timeInput.val();
  timeInput.val(submitFormat);
  
  // 延迟恢复显示值，确保表单已经提交
  setTimeout(() => {
    timeInput.val(originalDisplay);
  }, 100);
});

这个方法不用额外DOM元素，但要注意如果表单提交是异步的（比如AJAX），需要调整恢复值的时机，确保在请求发送完成后再恢复。

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