在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)传递给输入元素的属性。

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>

​