Tempus Dominus（Bootstrap4日期选择器）：键盘手动输入日期失效问题

问题场景 #

使用Bootstrap 4适配版的Tempus Dominus日期时间选择器（日期+时间模式）时，遇到以下问题：

• 通过GUI日历选择日期后，点击Go按钮能正常获取并显示所选日期；
• 直接用键盘修改输入框内的日期（例如将年份2022改为2012），无论按回车、失焦后点击Go按钮，显示的日期始终没有变化。

当前Go按钮通过datetimepicker('viewDate')方法获取选择器的内部值，相关代码如下：

// Set up datetimepicker
$('#datetimepicker1').datetimepicker({
  allowInputToggle: true,
  format: 'MM/DD/YYYY HH:mm',
  sideBySide: true,
  icons: {
    time: 'far fa-clock',
    date: 'far fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down',
    previous: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    today: 'far fa-calendar-check-o',
    clear: 'far fa-trash',
    close: 'far fa-times'
  }
});

// Handle button
$('#btnSubmit').click(function() {
    $('#result').html($('#datetimepicker1').datetimepicker('viewDate').format('MM/DD/YYYY HH:mm'));
});

操作验证步骤：

• 通过GUI日历选择任意日期，点击Go按钮，日期正常显示；
• 重复上一步，确认所有GUI选择的日期均能生效；
• 键盘修改输入框年份为2012，点击Go按钮，日期无变化；按回车或失焦后操作结果一致。

问题原因 #

viewDate是Tempus Dominus用于控制选择器界面显示的内部日期值，不会自动同步手动输入的内容。手动修改输入框后，选择器的内部状态并未更新，因此通过viewDate获取的还是之前GUI选择的日期。

解决办法 #

方案1：同步输入框修改到选择器内部状态 #

监听输入框的change事件，当内容修改时，主动解析输入值并更新选择器的日期：

// 监听输入框变化，同步更新选择器内部日期
$('#datetimepicker1 input').on('change', function() {
  const inputValue = $(this).val();
  if (inputValue) {
    // 按选择器格式解析输入值为moment对象（Tempus Dominus依赖moment.js）
    const parsedDate = moment(inputValue, 'MM/DD/YYYY HH:mm');
    if (parsedDate.isValid()) {
      // 更新选择器的日期
      $('#datetimepicker1').datetimepicker('date', parsedDate);
    }
  }
});

添加这段代码后，手动修改输入框内容并失焦/按回车时，选择器的内部状态会同步更新，此时原有的Go按钮逻辑无需修改，viewDate就能获取到最新的日期值。

方案2：直接解析输入框值（不依赖选择器内部状态） #

如果不想依赖选择器的内部状态，可以直接读取输入框的值并解析为日期对象：

// 修改Go按钮逻辑
$('#btnSubmit').click(function() {
  const inputValue = $('#datetimepicker1 input').val();
  const selectedDate = moment(inputValue, 'MM/DD/YYYY HH:mm');
  
  if (selectedDate.isValid()) {
    $('#result').html(selectedDate.format('MM/DD/YYYY HH:mm'));
  } else {
    $('#result').html('请输入有效的日期时间格式');
  }
});

这种方式跳过选择器的内部状态，直接处理用户输入，更直接，同时还能添加格式校验。

内容的提问来源于stack exchange，提问作者gene b.