Spotfire中JavaScript日期选择器无法显示选中日期问题求助

直接修改Spotfire生成的输入框type为date会破坏它和Spotfire内部数据模型的绑定逻辑——Spotfire原生控件默认是文本输入类型，它的日期格式（比如MM/DD/YYYY）和HTML原生date控件的标准格式（YYYY-MM-DD）不匹配，而且Spotfire不会自动监听date控件的选择事件来同步数据，导致选中日期后输入框仍显示占位符。

正确的做法是用原生HTML日期选择器替代，同时通过JavaScript同步它和Spotfire控件的数据：

步骤1：修改HTML块代码 #

隐藏原来的Spotfire控件，添加自定义的日期选择器：

Start Date: 
<input type="date" id="customDatePicker">
<!-- 隐藏原生Spotfire控件，仅用于数据同步 -->
<span id="date1" style="display: none;">
  <SpotfireControl id="142f2c81bfc84adc9b97ef30eabb07ec" />
</span>

步骤2：添加同步逻辑的JavaScript #

通过代码实现自定义选择器和Spotfire控件的双向数据同步：

// 获取元素
const spotfireInput = document.querySelector("#date1 input");
const customPicker = document.querySelector("#customDatePicker");

// 初始化：把Spotfire已有的日期值同步到自定义选择器
if (spotfireInput.value) {
  const date = new Date(spotfireInput.value);
  // 转换为HTML date控件支持的YYYY-MM-DD格式
  customPicker.value = date.toISOString().split('T')[0];
}

// 监听选择器变化，同步回Spotfire控件
customPicker.addEventListener('change', function(e) {
  const selectedDate = new Date(e.target.value);
  // 转换为Spotfire期望的MM/DD/YYYY格式
  const formattedDate = `${selectedDate.getMonth() + 1}/${selectedDate.getDate()}/${selectedDate.getFullYear()}`;
  
  // 设置值并触发change事件，让Spotfire识别到数据更新
  spotfireInput.value = formattedDate;
  spotfireInput.dispatchEvent(new Event('change'));
});

这样处理后，自定义日期选择器能正常显示选中的日期，同时选中的日期也会同步到Spotfire的控件中，保证数据一致性。

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