Добавление дней в JavaScript возвращает сумасшедшие значения

Question

Я пытаюсь добавить любое количество дней к данной дате с помощью этого кода

$("body").change(".editField", function() {
  var startDate = new Date(Date.now());
  var addedDays = $("#daysAdded").val();
  var calculatedDate = addDays(startDate, addedDays);
  console.log(addedDays);
  console.log(calculatedDate)
  $("#dayResult").val(calculatedDate.toISOString().split("T")[0]);
});
function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
};

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='number' id='daysAdded' class='editField'>
<input type='text' id='dayResult'>

Ссылка на JSFiddle: https://jsfiddle.net/gv4qswjf/

Проблема - независимо от того, какую дату начала вы вводите:

• Как только вы ДОБАВИТЕ 1, вычисленная дата переходит на другой год (в моем случае март 2020 г.).
• Тогда это работает нормально на некоторое время ...
• Как толькопо мере того как вы ДОБАВЛЯЕТЕ 10, вычисленная дата переходит к 2027 году.
• Затем она работает нормально на некоторое время ...
• Как только вы добавляете 100, вычисленная дата переходит к 2069 году.

Plus СУБТРАКЦИЯ вообще не работает!

Что происходит? Я ничего не нашел о такой проблеме, но для меня это происходит в Chrome, Firefox, Edge ...

Я также пробовал разные версии jQuery (см. Код выше: 1.12, см. JSFiddle: 3.3).

Answer 1

При получении значения ввода проанализируйте его как Integer, используя parseInt(), это решит вашу проблему

$("body").change(".editField", function() {
  var startDate = new Date(Date.now());
  var addedDays = parseInt($("#daysAdded").val());
  var calculatedDate = addDays(startDate, addedDays);
  console.log(addedDays);
  console.log(calculatedDate)
  $("#dayResult").val(calculatedDate.toISOString().split("T")[0]);
});

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
};

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='number' id='daysAdded' class='editField'>
<input type='text' id='dayResult'>