在 HTML 文本輸入字段中添加日期選擇器的值

Question

有人可以建議我如何將所選日期（使用日期選擇器）添加為 HTML 文本輸入字段的值嗎？ 日期選擇器可以正常工作，但它目前僅在以下行顯示所選日期： <div class="event-log">Event logs:<br></div> ，而不是文本輸入字段中的值。

請在下面找到代碼：

  <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();
    });

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

    simplepicker.on('close', (date) => {
      $eventLog.innerHTML += ''  + '\n';
    });
    
    
    var dateselected = "09/08/2022";

    document.getElementById("myInput").value = dateselected;

  </script>

Answer 1

您需要將 datePicker (readableDate)中的日期值傳遞給輸入元素的value屬性。

const input = document.getElementById("myInput"); // <- 1) Grab the input

simplepicker.on('submit', (date, readableDate) => {
  $eventLog.innerHTML += readableDate + '\n';
  input.value = readableDate; // <- 2) Update the input value
});

 <script src="https://cdn.jsdelivr.net/npm/simplepicker@2.0.4/dist/simplepicker.js"></script> <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(); }); const input = document.getElementById("myInput"); simplepicker.on('submit', (date, readableDate) => { $eventLog.innerHTML += readableDate + '\n'; input.value = readableDate; }); simplepicker.on('close', (date) => { $eventLog.innerHTML += '' + '\n'; }); var dateselected = "09/08/2022"; document.getElementById("myInput").value = dateselected; </script>