如何将日期选择器选中值填入HTML文本输入框？

你只需要在SimplePicker的submit事件回调中，添加一行代码将选中的日期赋值给目标输入框即可。修改后的完整代码如下：

<button type="button" class="simplepicker-btn">Select date</button>

<input id="myInput" type="text"></input>

<div class="event-log">Event logs:<br></div> 

<script>
  let simplepicker = new SimplePicker({
    zIndex: 10
  });

  const $button = document.querySelector('.simplepicker-btn');
  const $eventLog = document.querySelector('.event-log');

  $button.addEventListener('click', (e) => {
    simplepicker.open();
  });

  simplepicker.on('submit', (date, readableDate) => {
    $eventLog.innerHTML += readableDate + '\n';
    // 新增：将选中的日期填入输入框
    document.getElementById("myInput").value = readableDate;
  });

  simplepicker.on('close', (date) => {
    $eventLog.innerHTML += ''  + '\n';
  });

  // 初始测试值，选中日期后会被覆盖
  var dateselected = "09/08/2022";
  document.getElementById("myInput").value = dateselected;
</script>

关键修改说明 #

• 在submit事件的回调函数中，新增了document.getElementById("myInput").value = readableDate;这一行，当用户选择日期并确认提交时，就会把格式化后的日期（readableDate）设置为输入框的value值。
• 你原来的硬编码初始值09/08/2022可以保留，作为输入框的默认值，后续选中新日期后会自动覆盖它。

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