JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
today - 10 days
</li>
<li>
<input type="date" id="dt10days">
</li>
<li>
today + 2 days
</li>
<li>
<input type="date" id="dt2days">
</li>
<li>
today + 3 weeks
</li>
<li>
<input type="date" id="dt3weeks">
</li>
<li>
today + 7 months
</li>
<li>
<input type="date" id="dt7months">
</li>
<li>
today + 4 years
</li>
<li>
<input type="date" id="dt4years">
</li>
</ul>
CSS
ul li {
list-style: none;
}
JavaScript
Date.prototype.addSeconds = function(seconds) {
this.setSeconds(this.getSeconds() + seconds);
return this;
};
Date.prototype.addMinutes = function(minutes) {
this.setMinutes(this.getMinutes() + minutes);
return this;
};
Date.prototype.addHours = function(hours) {
this.setHours(this.getHours() + hours);
return this;
};
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Date.prototype.addWeeks = function(weeks) {
this.addDays(weeks*7);
return this;
};
Date.prototype.addMonths = function (months) {
var dt = this.getDate();
this.setMonth(this.getMonth() + months);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
Date.prototype.addYears = function(years) {
var dt = this.getDate();
this.setFullYear(this.getFullYear() + years);
var currDt = this.getDate();
if (dt !== currDt) {
this.addDays(-currDt);
}
return this;
};
$(document).ready(function() {
var now = new Date();
now.addDays(-10);
$("#dt10days")[0].valueAsDate = now;
var now = new Date();
now.addDays(2);
$("#dt2days")[0].valueAsDate = now;
now = new Date();
now.addWeeks(3);
$("#dt3weeks")[0].valueAsDate = now;
now = new Date();
now.addMonths(7);
$("#dt7months")[0].valueAsDate = now;
now = new Date();
now.addYears(4);
$("#dt4years")[0].valueAsDate = now;
});