我有一个HTML5日期选择器，我想在单击按钮时更改该值。
<input type="date" id="datepicker" />
<button onclick="nextDay()">next</button>
由于该值是字符串，我的方法是将其解析为Date，并在操作后将其转换回字符串。但我的问题是，日期的月份是从 0 到 11，而日期选择器的月份是从 1 到 12。
代码：
// get the value
function getDatepicker() {
// get
var string = datepicker.val();
var date;
// verify the string is a valid date
if (isNaN(Date.parse(string))) {
// invalid date, get today()
date = new Date();
} else {
// String to Date
date = new Date(string);
}
return date;
}
// operate
function addDays(date, days) {
date.setDate( new Date(date.getDate() + days));
return date;
}
// set the value
function setDatepicker(date) {
function addZero(num) {
return ('0' + num).slice(-2);
}
date.setMonth( date.getMonth() +1 );
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var string = [year, addZero(month), addZero(day)].join('-');
datepicker.val(string);
}
var date = getDatepicker();
addDays(date,-1);
setDatepicker(date);
显然，由于日期选择器初始值是正确的，因此在转换为日期时，它会正确执行，但是在将日期转换为日期选择器值时，它会减去一个月。 它每天都工作正常，但在更改月份时失败，例如：
开始日期 = 1/4/2017 -1 天 = 31/3/2017+1month = 1/5/2017
然后下次我得到日期选择器值时，将是 1/5/2017 -1 个月，我将处于无限循环中。
有人可以阐明如何解决这个问题吗？ 提前感谢！
PS：tl;博士以粗体显示:)
要将日期解析为UTC，请附加一个 Z - 例如：new Date('2017-01-05T10:20:30Z')。
对于inputset/get值：你使用[elem].value
function getDatepicker(value) {
if (isNaN(Date.parse(value))) {
return new Date();
} else {
return new Date(value+"T10:20:30Z");
}
}
function addDays(value, date, days) {
var date = getDatepicker(value);
date.setDate( new Date(date.getDate() + days));
return date;
}
function setDatepicker(date) {
function addZero(num) {
return ('0' + num).slice(-2);
}
date.setMonth( date.getMonth() +1 );
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var string = [year, addZero(month), addZero(day)].join('-');
datepicker.value = string;
}
var datepicker = document.getElementById("datepicker");
document.getElementById("next").addEventListener("click", function(){
//console.log(datepicker.value);
var date = addDays(datepicker.value, date, 1);
setDatepicker(date);
});<input type="date" id="datepicker" />
<button id="next">next</button>当我在updateDatepickerById中更新日期选择器时，我像这样将1添加到月份：var month = date.getMonth() + 1;。
var GetDateFromDatepickerById = function (id) {
var datepicker = document.getElementById(id);
var date = new Date(datepicker.value);
date = addDay(date, 1);
return date;
};
var addDay = function (date, days) {
date.setDate(date.getDate() + days);
return date;
};
var updateDatepickerById = function (id, date) {
var datepicker = document.getElementById(id);
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month > 9 ? month.toString() : "0" + month;
var day = date.getDate();
day = day > 9 ? day.toString() : "0" + day;
datepicker.value = year + "-" + month + "-" + day;
};
var nextDay = function () {
var date = GetDateFromDatepickerById("datepicker");
date = addDay(date, 1);
updateDatepickerById("datepicker", date);
};
这是我的方法：
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<script>
document.addEventListener("DOMContentLoaded", function(event) { // as per https://developer.mozilla.org/fr/docs/Web/Events/DOMContentLoaded
console.log("DOM fully loaded and parsed");
Date.prototype.toDateInputValue = (function() { // as per http://stackoverflow.com/questions/6982692/html5-input-type-date-default-value-to-today
var local = new Date(this);
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
return local.toJSON().slice(0,10);
});
/* set the date to toDay for test purposes */
document.getElementById('datePicker').value = new Date().toDateInputValue();
/* get the date as string */
formDate = document.getElementById('datePicker').value;
console.log(formDate);
//make it a Date object:
newDat = new Date(formDate);
// add/substract x days
var x = (-33); //for example
dayValue = newDat.getUTCDate();
// https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/setDate
newDat.setDate(dayValue + x);
console.log("new date : " + newDat); // -> the date is correct
//set the input with it :
var day = newDat.getUTCDate();
var month = newDat.getMonth() + 1; // this method indeed returns 0 to 11 (!) so you need to add 1
var year = newDat.getFullYear();
//make the new date a string
newStrDat = year + '-' + ('0' + month).slice(-2) + '-' + ('0' + day).slice(-2);
console.log(newStrDat);
//set the field with it :-)
document.getElementById('datePicker').value = newStrDat;
});
</script>
</head>
<body>
<div>
<input id = "datePicker" type = "date">
</div>
</body>
<html>
由于其他答案似乎不能解决我的问题，最后我按照@christo8989的建议去做了一会儿.js。
// get the value
function getDatepicker() {
return datepicker.value;
}
// operate
function addDays(date, days) {
return moment(date).add(days, 'days').format('YYYY-MM-DD');
}
// set the value
function setDatepicker(date) {
datepicker.value = date;
}
比我的方法简单得多！谢谢！:)