jQuery DateTimePicker点击Now按钮重复点击显示旧日期问题求助

架构老林

2026-7-2

解决DateTimePicker“Now”按钮重复点击显示旧时间的问题

问题原因

你使用的jquery-ui-timepicker-addon 1.6.1版本存在Bug：点击“Now”按钮时，插件会缓存首次触发的时间，后续点击不会重新获取实时系统时间，导致显示旧值。

解决方案

方案1：升级插件版本

将jquery-ui-timepicker-addon升级到1.6.3及以上的稳定版本，新版本已修复该缓存问题，只需替换对应的CSS和JS引用即可。

方案2：手动绑定按钮事件（无需升级）

如果暂时无法升级插件，可通过手动监听“Now”按钮的点击事件，强制刷新时间：

修改后的JavaScript代码：

$('.from-date-picker').datetimepicker({
  dateFormat: "dd-M-yy",
  timeFormat: "hh:mm tt",
  showOn: "both",
  timeInput: true,
  stepHour: 1,
  stepMinute: 5,
  oneLine: true,
  controlType: 'select',
  buttonImageOnly: true,
  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonText: "Select date"
});

// 修复Now按钮缓存问题
$(document).on('click', '.ui-datepicker-current', function() {
  const now = new Date();
  // 按配置格式格式化日期和时间
  const dateStr = $.datepicker.formatDate("dd-M-yy", now);
  const timeStr = $.datepicker.formatTime("hh:mm tt", { hour: now.getHours(), minute: now.getMinutes() });
  $('.from-date-picker').val(`${dateStr} ${timeStr}`);
  // 关闭日期选择器弹窗
  $('.ui-datepicker').hide();
});