Tempus Dominus Datetimepicker切换至日历视图时钟图标仍显示异常

问题原因 #

你遇到的是Tempus Dominus 5.39.0版本的已知bug：当从时间视图切换回日历视图时，组件内部未正确触发图标的类名替换逻辑，导致切换后仍保留时钟图标的类，无法显示日历图标。

解决方案 #

方案1：升级组件版本 #

直接升级到Tempus Dominus 5.40.0及以上版本，官方已在后续版本中修复了该视图切换图标更新的问题，这是最彻底的解决方式。

方案2：手动绑定事件修复（适用于无法升级的场景） #

如果暂时无法升级版本，可通过监听视图切换事件，手动强制更新图标类：

$('#datetimepicker1').on('change.datetimepicker', function(e) {
  const pickerInstance = $(this).data('datetimepicker');
  const toggleButton = $(this).next().find('.btn-toggle');
  
  // 根据当前视图模式切换图标类
  if (pickerInstance.viewMode === 'days') {
    toggleButton.removeClass(pickerInstance.options.icons.time)
                .addClass(pickerInstance.options.icons.date);
  } else {
    toggleButton.removeClass(pickerInstance.options.icons.date)
                .addClass(pickerInstance.options.icons.time);
  }
});

额外提示 #

另外注意，你配置中的today: 'far fa-calendar-check-o'在Font Awesome 6中已被废弃，正确类名为far fa-calendar-check，虽然这不是当前图标显示错误的原因，但修正后可避免其他潜在的图标显示问题。

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