如何增加/减少HTML5 datepicker的值？

Question

我有一个HTML5日期选择器，单击按钮时要更改该值 。

<input type="date" id="datepicker" />
<button onclick="nextDay()">next</button>

由于该值是一个字符串，因此我的方法 是将其解析为Date ，然后在操作后将其转换回string 。 但是我的问题是，日期的月份是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);

显然，由于datepicker初始值是正确的，因此在转换为Date时，它可以正确执行，但是在将Date转换为datepicker值时，它减去一个月。 它每天都能正常工作，但是在更改月份时会失败，例如：

开始日期= 1/4/2017 -1天= 31/3/2017 +1个月= 1/5/2017

然后下次我获得datepicker值时，它将是1/5/2017 -1month，并且我将陷入无限循环。

有人可以阐明如何解决该问题吗？ 提前致谢！

PS： tl; dr以粗体显示:)

Answer 1

要将日期解析为UTC ，请附加Z，例如： new Date('2017-01-05T10:20:30Z') 。

set/get input值：您应该使用[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> 

Answer 2

当我更新updateDatepickerById中的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);
};

Answer 3

这是我的方法：

<!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>

Answer 4

由于其他答案似乎都不能解决我的问题，所以最终我按照@ christo8989的建议去了moment.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;
}

比我的方法简单得多！ 谢谢！ :)