在javascript中添加一天至日期字符串

我將checkOut的最小值設置爲checkIn的值。我的問題是，我需要添加一天到firstdate。（不應該是能查出來或在一天前檢查。）在javascript中添加一天至日期字符串

<script> 
function updatedate() { 
var firstdate = document.getElementById("checkIn").value; 
document.getElementById("checkOut").value = ""; 
document.getElementById("checkOut").setAttribute("min",firstdate); 
} 
</script> 

Check In 
<input type="date" id="checkIn" onchange="updatedate();" name="checkin"> 

Check out 
<input type="date" id="checkOut" min="" name="checkout">

來源

2016-08-16 Lachlanf

爲什麼不張貼代碼作爲一個可運行的代碼片斷？ – RobG

標記的副本沒有那麼有用。 OP有日期輸入，而不是日期對象，所以需要解析字符串，添加一天，然後再將其轉換回來。請注意，日期輸入將ISO 8601日期字符串視爲本地視圖，但Date構造函數會將UTC視爲本地視圖。那有什麼幫助？ – RobG

這有點做，能，但它只能在Chrome瀏覽器，因爲這是支持目前的日期輸入唯一的瀏覽器。哦，這個解決方案使用了momentjs，因爲解析一個日期並正確地增加1天，聽起來就更難了。

function updatedate() { 
 
    var checkin = document.getElementById("checkIn").value; 
 
    checkin = moment(checkin); 
 
    var checkout = checkin.add(1, 'd'); 
 
    document.getElementById("checkOut").setAttribute("min", checkout.format('YYYY-MM-DD')); 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    Check In 
 
    <input type="date" id="checkIn" onchange="updatedate();" name="checkin">Check out 
 
    <input type="date" id="checkOut" min="" name="checkout"> 
 
</div>

來源

2016-08-16 01:22:30 Will

只有在chrome上工作纔有發現 – derp

解析日期並添加一天實際上非常簡單，當然不需要像moment.js那樣大的庫，儘管小的解析和格式化庫可能會有所幫助。 – RobG

增加1天到8月31日，你會得到什麼？ 2月28日閏年呢？這並非不可能，但它肯定不是'非常簡單'。 – Will

一個momentless解決方案是將checkinDate解析到JS日期，然後創建一個新的日期，同時加入了一天的checkinDate。雖然是的，但當處理日期時，momentJS是goto庫。

的jsfiddle這裏：

https://jsfiddle.net/xugajae5/

曾經有位獲得分鐘格式輸入預期黑客：

var checkoutDateFormat = checkoutDate.toISOString().split('T')[0];

來源

2016-08-16 01:25:19 derp

未使用支持輸入型日期，所有的瀏覽器，所以你需要先處理。

然後，您可以將firstdate的值轉換爲Date對象，添加一天，然後以所需格式獲取日期。然而，您的問題是日期輸入（它是ISO 8601格式的日期字符串）的值被視爲本地，但Date構造函數將它視爲UTC。

所以，你需要解析字符串作爲本地日期，然後添加一天，然後回到正確的格式的字符串。下面的代碼僅僅是一個例子，您可能希望使用庫進行日期操作。只要記住不要使用Date構造函數解析日期字符串。

function getTomorrow(el) { 
 
    var form = el.form; 
 
    var start = parseISOAsLocal(form.start.value); 
 
    // Check if input date was valid 
 
    if (!start.getTime()) { 
 
    form.tomorrow.value = ''; 
 
    form.start.value = 'Invalid date'; 
 
    return; 
 
    } 
 
    start.setDate(start.getDate() + 1); 
 
    form.tomorrow.value = formatISODate(start); 
 
} 
 

 
function parseISOAsLocal(s) { 
 
    var b = s.split(/\D/); 
 
    var d = new Date(b[0], --b[1], b[2]); 
 
    return d && d.getMonth() == b[1]? d : new Date(NaN); 
 
} 
 

 
function formatISODate(date) { 
 
    return ('000' + date.getFullYear()).slice(-4) + '-' + 
 
     ('0' + (date.getMonth() + 1)).slice(-2) + '-' + 
 
     ('0' + date.getDate()).slice(-2); 
 
}

<form> 
 
    Start (yyyy-mm-dd): 
 
    <input type="date" name="start" value="2016-08-31"><br> 
 
    Tomorrow: <input type="date" name="tomorrow" readonly><br> 
 
    <input type="button" onclick="getTomorrow(this)" 
 
     value="Show tomorrow"> 
 
</form>

來源

2016-08-16 01:53:38 RobG

<script> 
    function updatedate(){ 
     var checkInValue = document.getElementById("checkIn").value; 
     var checkInDate = Date.parse(checkInValue); 
     var minDate = new Date(checkInDate + 24 * 3600 * 1000); 
     document.getElementById("checkOut").setAttribute("min", minDate.toDateString()); 
    } 
</script>

來源

2016-08-16 02:05:46 YonF

在javascript中添加一天至日期字符串

回答

相關問題