在文本框中显示结束日期，用户选择的开始日期 + 使用 JavaScript 的 1 年

Display end date in textbox with User Selected Start Date + 1 year using JavaScript

本文关键字：日期 开始 使用 JavaScript 选择 用户 文本 显示 结束      更新时间：2023-09-26

例如，如果用户选择27/01/2016，"结束日期"文本框将显示27/01/2017，这是不可编辑的。最好不使用JQueryDate函数

一个解决方案是有两个日期输入。

第一个将由用户用于选择日期。一旦用户选择一个日期，这个就会消失。

第二个将是隐形的和readonly.用户选择日期后，将使用 Date + 1y 启动并显示此日期。

你可以使用简单的javascript来添加+ 1，请参阅日期javascript对象

正如 Dionys 所说，为你的输出设置一个readonly输入字段，如下所示：

<p>
  <input type="text" id="date" />
</p>
<p>
  <input type="text" id="output" readonly="readonly" />
</p>

然后，假设日期是以这种格式选择的，这是一个糟糕的跳跃，但目前我唯一能做的，有点split()和join()动作：

var date = document.getElementById('date');
date.addEventListener('change', function(){
    var val = date.value, y = '', parts = [];
    if(val) {
        parts = val.split('/');
        y = parts.length - 1;
        parts[y] = parseInt(parts[y], 10) + 1;
        document.getElementById('output').value = parts.join('/');
    }
}, false);

给予或接受，只要日期与去年一起呈现，这应该运行良好。如果您发布代码链接或更新问题，我可以缩小范围以使其更准确。

小提琴

一切都取决于您的输入类型。它是来自 JavaScript 的纯Date对象，还是只是一个格式化为 dd/MM/yyyy 的简单String？

日期输入

这很简单 - 唯一要做的就是增加一年，然后将日期转换为您的格式。

var d = new Date(); // It's for presentation. You already have it from your input.
d.setFullYear(d.getFullYear()+1);
var str = [d.getDate(), d.getMonth()+1, d.getFullYear()].join('/');

字符串输入

这是上面稍微修改的例子。您必须先解析字符串，以及如何解析，取决于您的日期格式。我将在这里假设，这是dd/MM/yyyy.

var s = '28/01/2016';
var chunks = s.split('/');
d = new Date(chunks[2], chunks[1]-1, chunks[0], 0, 0, 0, 0);
d.setFullYear(d.getFullYear()+1);
var str = [d.getDate(), d.getMonth()+1, d.getFullYear()].join('/');

尝试使用 String.prototype.slice() ，在input type="date"第一个input type="date"元素.nextElementSibling处设置disabled属性

编辑， 更新

添加了new Date()，.toJSON()处理闰年，如@itachi

var input = document.querySelector("input");
input.onchange = function(e) {
  var val = this.value;
  // add `1` to first four characters of `this.value` : `yyyy` 
  this.nextElementSibling.value = new Date(1 + +val.slice(0, 4) 
                                  + val.slice(4)).toJSON().slice(0, 10)
}
<input type="date" /><input type="date" disabled>

相关文章：