时间戳

首页 > 解决方案 > 用户提交日期后自动生成天数

javascript - 用户提交日期后自动生成天数

问题描述

我尝试在按钮上使用 onclick 来计算两个日期之间的天数，并在文本框中生成它并且它可以工作。但是，我不确定当用户在"input type date"上输入日期时我该怎么做，它会自动计数并在textbox中生成天数。有什么想法吗？

我的 HTML

            <td><b>Start Leave Date:</b></td>
            <td> <input type="date" name="leave_start_date" id="leave_start_date" required></td>
            </tr>
            <tr>
            <td><b>End Leave Date:</b></td>
            <td> <input type="date" name="leave_end_date" id="leave_end_date" required onclick="noOfDays"></td>
            </tr>
            <tr>
            <td> <b>No of Days:</b> </td> <td> <input type="text" name="noOfDays" id="noOfDays" readonly>Days <button type="button" name="button" onclick="countdays()">Count</button></td>
            </tr> 


<script type="text/javascript">
function countdays () {
  var dateend = new Date (document.getElementById("leave_end_date").value);
  var datestart = new Date (document.getElementById("leave_start_date").value);
  var counttime = dateend.getTime() - datestart.getTime();
  var countdays = counttime / (1000 * 3600 * 24);
  document.getElementById("noOfDays").setAttribute("value",countdays);
}
</script>

标签： javascripthtml

解决方案

您可以使用侦听器来检测用户何时完成输入日期并尝试自动计算它！

请参阅：JSFiddle

<td><b>Start Leave Date:</b></td>
            <td> <input type="date" name="leave_start_date" id="leave_start_date" required></td>
            </tr>
            <tr>
            <td><b>End Leave Date:</b></td>
            <td> <input type="date" name="leave_end_date" id="leave_end_date" required onclick="noOfDays"></td>
            </tr>
            <tr>
            <td> <b>No of Days:</b> </td> <td> <input type="text" name="noOfDays" id="noOfDays" readonly>Days <button type="button" name="button" onclick="countdays()">Count</button></td>
            </tr> 


<script type="text/javascript">
  var txtdateend = document.getElementById("leave_end_date");
  var txtdatestart = document.getElementById("leave_start_date");
  
  txtdateend.addEventListener("change", countdays);
  txtdatestart.addEventListener("change", countdays);
  
function countdays () {
  var dateend = new Date (document.getElementById("leave_end_date").value);
  var datestart = new Date (document.getElementById("leave_start_date").value);
  var counttime = dateend.getTime() - datestart.getTime();
  var countdays = counttime / (1000 * 3600 * 24);
  document.getElementById("noOfDays").setAttribute("value",countdays);
}
</script>

新的部分是：

  var txtdateend = document.getElementById("leave_end_date");
  var txtdatestart = document.getElementById("leave_start_date");

  txtdateend.addEventListener("change", countdays);
  txtdatestart.addEventListener("change", countdays);

你可以在listeners这里查看：onchange 事件

推荐阅读