将X天添加到键入的日期中

Add X days to a typed in date

本文关键字：日期 添加      更新时间：2023-09-26

我有一些JavaScript代码，它在输入到文本框中的日期上添加10天，并将其打印到另一个文本框中，只是它没有更新月份，而是将日期设置为31+，这显然是一个问题。

这是文本框：

作业完成日期：

<input type="date" name="completion_date" onblur="autofill_date_1(this.value)">

我有第二个文本框，应该在点击文本框时更新：

报告截止日期：

<input type="text" name="due_date" id="autofill_1" readonly>

这是更新日期的JavaScript代码，但如果日期超过了月份的最后一天，则不会更新月份：

function autofill_date_1(formDate) {
      var interval = 10;
      var startDate = new Date(Date.parse(formDate));
      var month = startDate.getUTCMonth() + 1;
      var day = startDate.getUTCDate();
      var year = startDate.getUTCFullYear();
      var expDate = month + "-" + (day + interval) + "-" + year;
      new_text = document.getElementById("autofill_1");
      new_text.value = newDate;
};

我明白为什么会有这样的问题，但我没有任何约会经验。关于类似的问题，已经有很多答案了，但没有一个对我的尝试有帮助。解决这个问题的最佳方法是什么，也许是完全不同的方法？

您可以使用getTime:

function autofill_date_1(formDate){
    var interval = 10;
    var startDate = new Date(Date.parse(formDate));
    // Assuming the above date parses well:
    var expDate = new Date(startDate.getTime() + interval * 86400000); 
    var month = expDate.getUTCMonth() + 1;
    var day = expDate.getUTCDate();
    var year = expDate.getUTCFullYear();
    var expDate = ('0' + month).substr(-2) + "-" + ('0' + day).substr(-2) + "-" + year;
    new_text = document.getElementById("autofill_1");
    new_text.value = expDate;
}

这里有一个简单的日期算法的例子，它应该足以让你开始：

var date1 = new Date("10/Dec/2015 20:30:00");
var daysToAdd = 30;
date1.setDate(date1.getDate() + daysToAdd)
document.write(date1.getDate() + "/" + (date1.getMonth()+1) + "/" + date1.getFullYear());

实际上这里有一个非常简单优雅的解决方案。代码中的注释应该很清楚，但你可能想阅读Date对象及其方法来完全理解它

var dueDate = document.getElementById('due-date'),
    repDate = document.getElementById('report-date');
dueDate.addEventListener('blur', function(e) {
  var repDateObj= new Date(this.value),
      nrOfDays  = 10; // nr. of days to report in second input
  
  repDateObj.setDate(repDateObj.getDate()+nrOfDays);
  // [].join('-') is the same as doing item1 + '-' + item2 + '-' etc...
  repDate.value = [
    repDateObj.getFullYear(),
    // if the month/ date are < 10, add a leading 0 so the format is compatible with 
    // the format expected by date inputs (yyyy-mm-dd)
    // add +1 to months because they start at 0=January
    (repDateObj.getMonth() + 1 < 10 ? '0' : '') + (repDateObj.getMonth() + 1),
    (repDateObj.getDate() < 10 ? '0' : '') + repDateObj.getDate()
  ].join('-');
  
}, false);
<input type="date" id="due-date">
<input type="date" id="report-date" disabled>

相关文章：