參考輸入字段值更改日期JQuery

Question

我想將日期添加到日期字段並輸出日期結果。 現在的問題是，結果只是將日期添加到像日期那樣的日期，但未能實際添加日期。 任何想法？非常感謝！

$("#add").on('click', function() { 
 
    var set = $('#date').val(); 
 
    if (set) { 
 
    $("#result").val($("#day").val() + set); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <td> 
 
     <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td> 
 
    <td><input type="text" value="3" id="day"> </td> 
 
    <td><input type="text" id="result"> </td> 
 
    </tbody> 
 
</table>

Answer 1

你需要生成字符串Date對象，並完成其餘的日期對象。

$("#add").on('click', function() { 
 
    var val = $('#date').val(); 
 
    if (val) { 
 
    // parse the date string 
 
    var set = new Date(val); 
 

 
    // update the date value, for adding days 
 
    set.setDate(set.getDate() + Number($("#day").val())); 
 

 
    // generate the result format and set value 
 
    $("#result").val([addPrefix(set.getDate()), addPrefix(set.getMonth() + 1), set.getFullYear()].join('/')); 
 
    } 
 
}); 
 

 
// function for adding 0 prefix when date or month 
 
// is a single digit 
 
function addPrefix(str) { 
 
    return ('0' + str).slice(-2) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <td> 
 
     <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td> 
 
    <td><input type="text" value="3" id="day"> </td> 
 
    <td><input type="text" id="result"> </td> 
 
    </tbody> 
 
</table>

Answer 2

$('#date').val()會給你YYYY-MM-DD格式字符串日期。將它拆分爲-。

然後將天添加到最後一個拆分值。

注意：添加日期後的值超過30/31時，您必須小心，因爲月中的天數不能超過它。假設你可以自己添加該條件。

$("#add").on('click', function() { 
 
    var set = $('#date').val().split("-"); 
 
    if (set) { 
 
    $("#result").val([set[0], set[1], Number($("#day").val()) + Number(set[2])].join("-")); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <td> 
 
     <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td> 
 
    <td><input type="text" value="3" id="day"> </td> 
 
    <td><input type="text" id="result"> </td> 
 
    </tbody> 
 
</table>

Answer 3

檢查下面的代碼。

首先，您需要將輸入的日期字符串轉換爲日期對象，然後需要添加日期（需要先將數字格式的天數值轉換爲日期）。

然後根據格式顯示結果中的新日期，您可以設置它。添加了一個用於填充零的功能，如果不需要，可以將其刪除。

$("#add").on('click', function() { 
 
    var days = $('#day').val(); 
 
    if (days) { 
 
    var date = new Date($('#date').val()); 
 
var newdate = new Date(date.setDate(date.getDate() + parseInt(days))); 
 
    
 
    $("#result").val(padleft(newdate.getMonth()+1) + '/' + padleft(newdate.getDate()) + '/' + newdate.getFullYear()); 
 
    } 
 
}); 
 

 
function padleft(val){ 
 
return ("0"+val).slice(-2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="one"> 
 
    <th>Date</th> 
 
    <th>Days</th> 
 
    <th>Result</th> 
 
    <tbody> 
 
    <td> 
 
     <input type="date" value="2" id="date"><button id="add" type="button">OK</button></td> 
 
    <td><input type="text" value="3" id="day"> </td> 
 
    <td><input type="text" id="result"> </td> 
 
    </tbody> 
 
</table>