Question

我有一些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;
};

我知道为什么会出现这样的问题，但我没有任何处理日期的经验。关于类似的问题已经有很多答案，但它们都没有帮助我正在尝试的方式。解决这个问题的最佳方法是什么，也许是完全不同的方式？

Answer 1

这是一个简单的日期算法的例子，它应该足以让你前进：

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());

Answer 2

您可以使用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;
}

Answer 3

实际上这是一个非常简单而优雅的解决方案。代码中的注释应该清楚，但您可能希望阅读Date object及其方法以完全理解它。您可以在此帖子的底部测试代码段：）

＆＃13;

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);

＆＃13;

<input type="date" id="due-date">
<input type="date" id="report-date" disabled>

＆＃13;

将X天添加到输入日期

3 个答案: