JavaScript 中是否有一种方法可以根据开始日期和天数获取结束日期？

Question

 $( document ).ready(function(){ $('#n_days').change(function(){ var nstart_date = $("#start_date").val(); alert (nstart_date); var ndays = document.getElementById('n_days').value; alert (ndays); var end_date1 = new Date(nstart_date); // pass start date here alert (end_date1); enddate.setDate(end_date.getDate() + n_days); var end= $('#end_date').val( (end_date.getMonth() + 1)+ '/' + end_date.getDate() + '/' + end_date.getFullYear() ); $("#end_date").val(dat); }); });

 <!-- begin snippet: js hide: false console: true babel: false -->

如何根据开始日期和天数填写“结束日期”。 我希望用户输入“开始日期”，当他们输入“天数”时，应自动填写结束日期。 例如：如果用户输入开始日期 - 03/10/2020 和天数 - 5，则结束日期应为 08/10/2020。

Answer 1

我向date object添加了一个prototype函数，以便我们可以调用 add days 来开始日期，我做的第二件事是日期控件需要YYYY-MM-dd格式的值，您可以通过在日期对象上调用toISOString()获得该值。 下面剪下的代码应该可以解决您的问题。

用于将原型函数添加到日期对象的参考帖子。 您可能会花一些时间在这篇文章上以了解更多信息。 向 JavaScript 日期添加天数

 Date.prototype.addDays = function(days) { debugger; var date = new Date(this); date.setDate(date.getDate() + Number(days)); return date; } $(document).ready(function() { $('#n_days').change(function() { var nstart_date = $("#start_date").val(); alert(nstart_date); var ndays = document.getElementById('n_days').value; alert(ndays); var end_date1 = new Date(nstart_date).addDays(ndays); alert(end_date1) var endDateFormatted = end_date1.toISOString().substr(0, 10) document.getElementById('end_date').value = endDateFormatted; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <form id="form1" name="form1" action="add_con.php" method="post"> <table id="t01"> <tr> <td> <div class="row"> <div class="col-40"> <label for="startdate">start date:</label> </div> <div class="col-60"> <input type="date" id="start_date" name="start_date" size="20"> </div> </div> </td> </tr> <td> <div class="row"> <div class="col-40"> <label for="n_daysa">No. of days:</label> </div> <div class="col-60"> <font face="Cambria" style="font-size: 12pt"> <font size="4"> <input type="number" id="n_days" name="n_days" min=0 placeholder="Enter no. of days.." required size="20" style="font-size:14px"></font> </font> </div> </div> </td> <td> <div class="row"> <div class="col-40"> <label for="end_datea">&nbsp;end date:</label> </div> <div class="col-60"> <font face="Cambria" style="font-size: 12pt"> <input type="date" id="end_date" name="end_date" placeholder="End date.." required size="20" style="font-size:14px"> </font> </div> </div> </td> </tr> </table> </p> <div class="row"> <p align="center"> <font face="Cambria"> <input type="submit" value="Submit"> </font> <font face="Cambria"> &nbsp;&nbsp;&nbsp; <input type="reset" value="Reset" name="reset"> </font> </div> </form> </div>

Answer 2

请在下面查看您的问题的答案。 您还可以将负值传递给函数 addDays() 以获取以前的日期。

 Date.prototype.addDays = function (num) { var value = this.valueOf(); value += 86400000 * num; return new Date(value); } $('#n_days').change(function(){ var $datepicker = $('#start_date'); var $datepicker1 = $('#end_date'); var selectedDate = $datepicker.val(); var result = new Date(selectedDate); var dateval = result.getDate(); var ndays = $('#n_days').val(); numdays = Number(ndays); var expirationDate = result.addDays(numdays); end_date1 = new Date(expirationDate); var day = ("0" + end_date1.getDate()).slice(-2); var month = ("0" + (end_date1.getMonth() + 1)).slice(-2); var year = end_date1.getFullYear(); var newdate = year + '-' + month + '-' + day; $datepicker1.val(newdate); }); <!-- begin snippet: js hide: false console: true babel: false -->

 <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script> <div class="container"> <form id="form1" name="form1" action="add_con.php" method="post"> <table id="t01"> <tr> <td> <div class="row"> <div class="col-40"> <label for="startdate">start date:</label> </div> <div class="col-60"> <input type="date" id="start_date" name="start_date" size="20" > </div> </div> </td> </tr> <td> <div class="row"> <div class="col-40"> <label for="n_daysa">No. of days:</label> </div> <div class="col-60"> <font face="Cambria" style="font-size: 12pt"> <font size="4"> <input type="number" id="n_days" name="n_days" min=0 placeholder="Enter no. of days.." required size="20" style="font-size:14px"></font> </font> </div> </div> </td> <td> <div class="row"> <div class="col-40"> <label for="end_datea">&nbsp;end date:</label> </div> <div class="col-60"> <font face="Cambria" style="font-size: 12pt"> <input type="date" id="end_date" name="end_date" placeholder="End date.." required size="20" style="font-size:14px"> </font> </div> </div> </td> </tr> </table> <br><br><br> <hr color="#003399"> <!-- start second table--> <table class="table1" style="width:1209;" height="151"> <tr> <th height="21" width="34"><font color="#003399">Day</font></th> <th height="21" width="295"><font color="#003399">Date</font></th> </tr> <tr> <td height="1" width="34"><b>2</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date2" name="date2" size="10" style="width: 90%; "></font></td> </tr> <tr> <td height="1" width="34"><b>3</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date3" name="date3" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>4</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date4" name="date4" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>5</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date5" name="date5" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>6</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date6" name="date6" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>7</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date7" name="date7" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>8</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date8" name="date8" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>9</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date9" name="date9" size="10" style="width: 90%;"></font></td> </tr> <tr> <td height="1" width="34"><b>10</b></td> <td width="200" height="1"> <font face="Cambria" style="font-size: 11pt"> <input type="date" id="date10" name="date10" size="10" style="width: 90%;"></font></td> </tr> </table> <!-- end second table --> <div class="row"> <p align="center"> <font face="Cambria"> <input type="submit" value="Submit"></font> <font face="Cambria"> &nbsp;&nbsp;&nbsp; <input type="reset" value="Reset" name="reset"> </font> </div> </form> </div>

这工作正常。

还有一件事要问，我们如何根据“天数”的输入启用其他日期字段。 我还有 9 个日期字段 (date2--date10)，我想根据“天数”中的条目自动填充日期。 例如：如果用户输入开始日期 - 03/10/2020 和天数 - 5 和结束日期 - 08/10/2020 那么它应该显示如下：

date2- 04/10/2020, date3- 05/10/2020, date4- 06/10/2020, date5- 07/10/2020, date6- 08/10/2020, date7-禁用, date8-禁用, date9-禁用，date10- 禁用

在您的代码中添加了新的日期字段。 请建议..谢谢。