admin 管理员组

文章数量: 1086019

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=".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>

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./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>

  • javascript
  • jquery
Share Improve this question asked Jul 19, 2017 at 4:29 epiphanyepiphany 7661 gold badge14 silver badges32 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 2

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./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>

$('#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./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>

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./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>

本文标签： javascriptChange date with reference to Input field value JQueryStack Overflow

版权声明：本文标题：javascript - Change date with reference to Input field value JQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744088391a2531568.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。