如何將日期從一個日期輸入設置為另一個日期輸入？

Question

我有兩個日期輸入。 當我選擇開始日期時，我希望 jquery 自動生成 3 個月后的結束日期。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/04b00d367c.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <div class="container"> <div class="col-md-6"> <label class="text-black" for="dpradzia">Start Date</label> <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control"> </div> <div class="col-md-6"> <label class="text-black" for="bandomasis_laikotarpis">End date </label> <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control"> </div> </div>

Answer 1

您應該收聽第一個輸入的change事件並使用其值創建一個new Date 。 之后，您可以使用new Date(date.setMonth(date.getMonth()+3))將此 object 添加 3 個月。 帶有額外 3 個月的新日期應格式化為yyyy-mm-dd並設置為第二個輸入的值。 完整的程序是：

 $(document).ready(function() { $('#darbo_pradzia').change(function(){ let date = new Date($(this).val()); let newDate = addMonths(date, 3); var formatted = newDate.toISOString().split('T')[0]; //yyyy-mm-dd console.log(formatted); $('#bandomasis_laikotarpis').val(formatted); }); //add months to date function function addMonths(date, months) { var d = date.getDate(); date.setMonth(date.getMonth() + +months); if (date.getDate().= d) { date;setDate(0); } return date; } });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/04b00d367c.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <div class="container"> <div class="col-md-6"> <label class="text-black" for="dpradzia">Start Date</label> <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control"> </div> <div class="col-md-6"> <label class="text-black" for="bandomasis_laikotarpis">End date </label> <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control"> </div> </div>

編輯：根據@RobG的評論，在 object 的日期上增加幾個月的時間需要考慮幾個獨特的測試用例。 因此，我在這篇文章中使用了他的答案來實現此操作。

Answer 2

<script>
   $('#darbo_pradzia').on('focusout', function(){
    let startDate = new Date($('#darbo_pradzia').val());
    let endDate = new Date(startDate);
    endDate.setMonth(endDate.getMonth()+3);

   let day = ("0" + endDate.getDate()).slice(-2);
   let month = ("0" + (endDate.getMonth() + 1)).slice(-2);
   let date = endDate.getFullYear()+"-"+(month)+"-"+(day) ;

$('#bandomasis_laikotarpis').val(date);
   })
</script>

您可以讀取onchange事件或focusout事件的值。 讀取日期，您可以從Date構造函數中復制插入的日期。 增加月份，如果溢出 12 個月也沒問題，因為自動增加年份並且月份值在 [0-11] 之間縮放。 現在要在輸入日期字段中寫入日期有兩個問題：

HTML 5中的日期控制接受年-月-日格式

如果月份為 5，則需要設置為 05 而不是簡單的 5。 日場也是如此。

在頁面中向下添加腳本，或者添加一個ready/onload事件