看起来你的DateTimePicker日历功能已经正常工作了，问题大概率出在实时刷新的逻辑和选择事件的绑定上。我来帮你梳理完整的实现方案，应该能解决你的问题：

1. 确认HTML结构 #

先确保页面有用于显示时间的容器和DateTimePicker的输入控件：

<!-- 用于展示实时时间的div -->
<div id="live-time-display"></div>
<!-- DateTimePicker输入框 -->
<input type="text" id="date-picker" class="datetimepicker">

2. 完整JavaScript实现 #

下面的代码会实现两个核心需求：

• 页面加载后自动显示当前系统时间，每秒刷新秒数
• 用户通过DateTimePicker选择时间后，切换显示选中的时间并继续实时走秒

jQuery(document).ready(function() {
  // 初始化DateTimePicker（这里假设你用的是jQuery UI DateTimePicker，若用其他插件需调整事件）
  $('#date-picker').datetimepicker({
    dateFormat: 'yy-mm-dd',
    timeFormat: 'HH:mm:ss',
    // 用户选择时间时触发的回调
    onSelect: function(selectedDateTime) {
      // 将选中的时间转为Date对象
      currentDisplayTime = new Date(selectedDateTime);
      // 立即更新显示内容
      renderTime();
    }
  });

  // 存储当前要显示的时间，默认是系统当前时间
  let currentDisplayTime = new Date();

  // 格式化并更新时间显示的函数
  function renderTime() {
    // 格式化为YYYY-MM-DD HH:mm:ss的标准格式
    const formattedTime = `${currentDisplayTime.getFullYear()}-${padZero(currentDisplayTime.getMonth()+1)}-${padZero(currentDisplayTime.getDate())} ${padZero(currentDisplayTime.getHours())}:${padZero(currentDisplayTime.getMinutes())}:${padZero(currentDisplayTime.getSeconds())}`;
    $('#live-time-display').text(formattedTime);
    // 每秒给当前时间加1秒，实现实时走秒
    currentDisplayTime.setSeconds(currentDisplayTime.getSeconds() + 1);
  }

  // 辅助函数：给单个数字补零（比如5变成05）
  function padZero(num) {
    return num < 10 ? `0${num}` : num;
  }

  // 页面加载时先渲染一次时间
  renderTime();
  // 设置定时器，每秒刷新一次显示
  setInterval(renderTime, 1000);
});

3. 常见问题排查 #

如果还是没效果，可以检查这几个关键点：

• 事件绑定是否匹配插件：不同DateTimePicker插件的事件名不同，比如bootstrap-datetimepicker用的是dp.change事件，而非onSelect。如果你的插件是bootstrap版本，把事件绑定改成：

  $('#date-picker').on('dp.change', function(e) {
    if (e.date) {
      currentDisplayTime = e.date.toDate();
      renderTime();
    }
  });
  

• 变量作用域是否正确：确保currentDisplayTime定义在ready函数的全局作用域（相对于定时器和事件回调），如果它被包裹在局部函数里，事件触发时无法修改它的值，导致定时器一直使用初始时间。
• 定时器是否正常运行：可以在setInterval后加console.log('定时器运行中')，查看控制台是否每秒输出内容，确认定时器在工作。
• 时间格式化是否出错：如果显示的时间格式异常，可以简化格式化逻辑：

  const formattedTime = currentDisplayTime.toISOString().slice(0, 19).replace('T', ' ');
  

这样调整后，应该就能实现你想要的功能了！

内容的提问来源于stack exchange，提问作者Tania Martínez