CODEWITHSUNDEEP
javascriptjquery
epiphany
epiphany

Reputation: 766

Change date with reference to Input field value JQuery

I'd like to add days to the date field and output a date result. The problem is right now, the result just adding the day to the date like a string, but fail to actually add 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>

Upvotes: 3

Views: 7667

Answers (3)

Prashant Shirke
Prashant Shirke

Reputation: 1423

Check below code.

First you need to convert entered date string in to date object and then need to add days into it (need to convert days value in number format first).

And then to show the new date in result as per format you can set it. Added one function to padleft the zeros, 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>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

You need to generate Date object from the string and do the rest on the 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>

Upvotes: 2

vatz88
vatz88

Reputation: 2452

$('#date').val() will give you date in yyyy-mm-dd format string. Split it by -.

Then add days to the last split value.

NOTE: you'll have to take care when value after adding days exceeds 30/31 as for the number of days in month cannot be more than it. Assuming you can add that 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>

Upvotes: 2

Related Questions