如何以编程方式刷新Tempus Dominus v6内联日期选择器？

使用add(DateTime)方法添加选中日期后，组件不会自动刷新视图，这是官方文档明确说明的行为。要让添加的日期立即显示，只需在添加完成后调用组件实例的render()方法，强制重新渲染界面。

示例代码 #

// 初始化内联日期选择器
const picker = new tempusDominus.TempusDominus(document.getElementById('yourInlinePickerId'));

// 批量添加选中日期
picker.dates.add(tempusDominus.DateTime.local(2024, 5, 10));
picker.dates.add(tempusDominus.DateTime.local(2024, 5, 15));
picker.dates.add(tempusDominus.DateTime.local(2024, 5, 20));

// 调用render()刷新组件，立即显示所有添加的日期
picker.render();

组件初始化完成后执行的场景 #

如果需要在组件加载完成后自动添加日期并显示，可以监听initialize事件：

const picker = new tempusDominus.TempusDominus(document.getElementById('yourInlinePickerId'));

picker.addEventListener('initialize', () => {
  // 添加日期
  picker.dates.add(tempusDominus.DateTime.local(2024, 5, 10));
  // 刷新视图
  picker.render();
});

render()方法会重新渲染日期选择器的所有元素，包括更新选中日期的高亮状态，完美解决手动选择才显示的问题。

内容的提问来源于stack exchange，提问作者Grzegorz Tokajuk