如何增加/減少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日期選擇器值？

回答

相關問題