Change date with reference to value of jQuery input field
I would like to add days to a date field and output the result. The problem right now, as a result, is just adding the day to the date like a string, but not really adding days to the date. Any idea? Many thanks!
$("#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>
source to share
You need to generate a Date object from a string and do the rest on a date object.
$("#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>
source to share
Check out the code below.
First you need to convert the entered date string to a date object and then add days to it (you need to convert the day value to number format first).
And then, to show the new date in the result according to the format, you can set it. Added one function to fill in zeros, which you can remove if not required.
$("#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>
source to share
$('#date').val()
will give you the date in yyyy-mm-dd format. Divide it into -
.
Then add the days before the last split value.
NOTE. You will need to take care that the value after adding days is greater than 30/31, since the number of days in a month cannot be more. Assuming you can add this condition yourself.
$("#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>
source to share