input type="datetime-locale" и выпадающий список

Question

Помогите! у меня 2 инпута с датой и временем. Под ними выпадающий список с различными промежутками времени. В выпадающем списке мы выбираем промежуток времени, а в инпутах отражается так: в первом инпуте время выбранное в списке считая от настоящего момента, а во втором инпуте текуший момент времени. К примеру, если мы выбрали 8 часов, то в первом инпуте покажется дата и время 8 часов назад. второй инпут я сделала, как сделать первый?

$(document).ready(function() {
  $(document.getElementById("input2")).val(new Date().toJSON().slice(0, 19));
});

<div>
  <input type="datetime-local" id="input1" required>
  <input type="datetime-local" id="input2" required>

  <select id="select">
    <option value="hour" id="hour">1 час</option>
    <option value="hours_8" id="hours_8">8 часов</option>
    <option value="day" id="day">1 день</option>
    <option value="days_30" id="days_30">30 дней</option>
  </select>
  <button type="button"></button>
</div>

Answer 1

Можно так сделать:

 let date = +new Date()
 console.log(date,select.value);
$(document).ready(function() {
  $(document.getElementById("input2")).val(new Date(date).toJSON().slice(0, 19));
});
  $(document).ready(function() {
    $(document.getElementById("input1")).val(new Date(date - 60 * 60 * 1000).toJSON().slice(0, 19));
  });

select.onclick = function() {
  let interval;
  switch (select.value) {
    case "hour":
      interval = 60 * 60 * 1000;
      break;
    case "hours_8":
      interval = 8 * 60 * 60 * 1000;
      break;
    case "day":
      interval = 24 * 60 * 60 * 1000;
      break;
    case "days_30":
      interval = 30 * 24 * 60 * 60 * 1000;
      break;
  }
  console.log(new Date(),select.value);
  $(document).ready(function() {
    $(document.getElementById("input1")).val(new Date(date - interval).toJSON().slice(0, 19));
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="datetime-local" id="input1" required>
  <input type="datetime-local" id="input2" required>

  <select id="select">
    <option value="hour" id="hour">1 час</option>
    <option value="hours_8" id="hours_8">8 часов</option>
    <option value="day" id="day">1 день</option>
    <option value="days_30" id="days_30">30 дней</option>
  </select>
  <button type="button"></button>
</div>

БЛОГ НА HUSL

input type="datetime-locale" и выпадающий список

Ответы (1 шт):