如何增加/减少 HTML5 日期选择器值？答案

【问题标题】：How to increase/decrease HTML5 datepicker value?如何增加/减少 HTML5 日期选择器值？
【发布时间】：2017-05-10 14:14:47
【问题描述】：

我有一个 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);

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

开始日期 = 1/4/2017 -1day = 31/3/2017 +1month = 1/5/2017

然后下次我得到 datepicker 值时，将是 2017 年 1 月 5 日 -1 个月，我将处于无限循环中。

有人可以解释一下如何解决这个问题吗？提前致谢！

PS：tl;dr 加粗:)

【问题讨论】：

为什么不直接发布执行此操作的实际代码？
@christo8989 因为太乱了，能回答的人估计也用不上了。
错字：var day = date.getDate();
@Stan 错字是什么？
你反对使用momentjs之类的东西吗？

标签： javascript jquery date datepicker

【解决方案1】：

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

对于input 的set/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>

【讨论】：

我故意加了 -1 天而不是 +1，因为加法有效，减法失败

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

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

【讨论】：