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

我有一个HTML5日期选择器，我想在按钮上点击更改值。如何增加/减少HTML5日期选择器值？

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

我方法因为该值是一个字符串，是解析它日期，并操作，后，将其转换回字符串。但我的问题是，日期的月份，是从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值时，它将减去一个月。它的工作原理，从日常细微，但却未能改变了一个月的时候，例如：

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

然后下一次我拿到日期选择器的值，将是2017年1月5日-1月，我将处于一个无限循环。

有人可以请说明如何解决这个问题吗？在此先感谢！

PS：TL;博士粗体:)

来源

2017-05-10 Dane411

为什么不只是发布你的实际代码这样做？ – christo8989

@ christo8989因为它太杂乱了，那些可以回答的人可能不需要它。 – Dane411

错字：'var day = date.getDate（）;' – butterFlyNick

由于其他的答案似乎并没有解决我的问题，最后我以@ 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; 
}

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

来源

2017-05-18 12:34:08 Dane411

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

来源

2017-05-10 15:34:54 christo8989

剖析的日期为UTC，追加为Z - 例如为：new Date('2017-01-05T10:20:30Z')。

为inputset/get值：您sholud使用[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>

来源

2017-05-10 16:02:14 AvrilAlejandro

我故意添加-1天而不是+1，因为添加作品，减去是失败的 – Dane411

这里是我的方法：

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

来源

2017-05-11 08:15:17 butterFlyNick

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

回答

相关问题