Question

我有一个HTML5日期选择器，我希望在点击按钮时更改该值。

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

我的方法，因为该值为字符串，将其解析为日期，并且在操作之后，将其转换回来字符串。但我的问题是，Date的月份是0到11，而datepicker的月份是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值时，将是1/5/2017 -1月，我将处于无限循环中。

有人可以说明如何解决这个问题吗？提前谢谢！

PS： tl; dr 以粗体显示：）

Answer 1

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

set/get input的价值：您赞成使用[elem].value

＆＃13;

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);
});

＆＃13;

<input type="date" id="datepicker" />
<button id="next">next</button>

＆＃13;

Answer 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);
};

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建议的时刻。

// 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;
}

比我的方法简单得多！谢谢！：）

如何增加/减少HTML5 datepicker值？

4 个答案: