如何使用 input type='date' 中的日期值？只有 JS答案

【问题标题】：how to use date value from input type='date' ? only JS如何使用 input type='date' 中的日期值？只有 JS
【发布时间】：2020-02-08 13:45:35
【问题描述】：

这里是设置“开始日期”和“结束日期”的代码，我还没有找到如何从input type='date'获取“选择日期”值。

如果有人知道，请帮忙。

function setPeriod() {
  var startDate = document.getElementById('startDate').value;
  var endDate = document.getElementById('endDate').value;
  
  
  console.log(startDate);
  console.log(endDate);
}

<div class='calendar'>   
  <table border='1px solid black'>
    <thead>
      <tr>
        <th colspan='2'>
          Set period
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          Start Date
        </th>
        <td>
          <input type='date' id='startDate'>
        </td>
      </tr>
      <tr>
        <th>
          End Date
        </th>
        <td>
          <input type='date' id='endDate'>
        </td>
      </tr>
    </tbody>
  </table>
  <button onclick='setPeriod();'>설정</button>
</div>

【问题讨论】：

您必须获取<input> 元素中的.value，然后从这些值构造 Date 实例。
我编辑参考了你的建议，console.log(edate);还是不行。
您的代码甚至没有运行。应该是onclick='setPeriod()'。

标签： javascript date input

【解决方案1】：

只需使用 valueAsDate

const startDate = document.getElementById('startDate')
    , endDate   = document.getElementById('endDate')
    , options   = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
    , dayMillis = 1000 * 60 * 60 * 24
    , diffDays  = (d1,d2) => Math.ceil(Math.abs(d2 - d1) / dayMillis )
    ;


function getPeriod()
  {
  console.log( 'start date =', startDate.valueAsDate.toLocaleDateString('en-EN', options) );
  console.log( 'end date   =', endDate.valueAsDate.toLocaleDateString('de-DE', options) );
  console.log( 'days between ->', diffDays(startDate.valueAsDate, endDate.valueAsDate)  );
  }

<div class='calendar'>   
  <table border='1px solid black'>
    <thead>
      <tr> <th colspan='2'> Set period </th> </tr>
    </thead>
    <tbody>
      <tr>
        <th> Start Date </th>
        <td> <input type='date' id='startDate'> </td>
      </tr>
      <tr>
        <th> End Date </th>
        <td> <input type='date' id='endDate'> </td>
      </tr>
    </tbody>
  </table>
  <button onclick='getPeriod()'>get periods</button>
</div>

【讨论】：

@RobG 在哪一行/指令上？

【解决方案2】：

我为您制作了这个简单的脚本，希望对您有所帮助！而且我已经更正了onclick属性中的调用错误，它必须是setPeriod()

function setPeriod() {
  var startDate = document.getElementById('startDate').value;
      startDate = startDate.split("-");
  
  var endDate = document.getElementById('endDate').value;
      endDate = endDate.split("-");
  
  
  var sDate = new Date();
      sDate.setYear(startDate[0]);
      sDate.setMonth(startDate[1]-1);
      sDate.setDate(startDate[2]);

  var eDate = new Date();
      eDate.setYear(endDate[0]);
      eDate.setMonth(endDate[1]-1);
      eDate.setDate(endDate[2]);
 
  
  console.log(sDate);
  console.log(eDate);
}

<div class='calendar'>   
  <table border='1px solid black'>
    <thead>
      <tr>
        <th colspan='2'>
          Set period
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          Start Date
        </th>
        <td>
          <input type='date' id='startDate'>
        </td>
      </tr>
      <tr>
        <th>
          End Date
        </th>
        <td>
          <input type='date' id='endDate'>
        </td>
      </tr>
    </tbody>
  </table>
  <button onclick='setPeriod()'>설정</button>
</div>

【讨论】：