Как преобразовать секунды в дату и время из пользовательского ввода с помощью JavaScript?

Question

$(document).on('keydown', function toDateTime(secs) {
  // var secs = $('input').focus();
  var t = new Date(1970, 0, 1); // Epoch
  t.setSeconds(secs);
  console.log(t);
  $("#toDate").html(t);
  $('input').focus();
  return t;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="border border-dark text-center card-body">
  <p>Convert Seconds</p>
  <input size="16" type="text" id="seconds">
</div>
<hr>
<div class="border border-dark text-center card-body">
  <p>To Date</p>
  <p id="toDate"></p>
</div>

Я хотел преобразовать секунды в дату и время, которые пользователь ввел в поле ввода.Я использовал jquery, и я получаю неверную дату ошибки при этом.На самом деле я хочу сделать это с чистым JavaScript.Можете ли вы помочь мне с этим.

Answer 1

изменить:

$(document).on('keydown', function toDateTime(secs) {
    // var secs = $('input').focus();
    var t = new Date(1970, 0, 1); // Epoch
    t.setSeconds(secs);
    console.log(t);
    $("#toDate").html(t);
    $('input').focus();
    return t;
 });

на:

$(document).on('keydown', function toDateTime(secs) {
    // var secs = $('input').focus();
    var t = new Date(1970, 0, 1); // Epoch
    t.setSeconds(this.value);
    console.log(t);
    $("#toDate").html(t);
    $('input').focus();
    return t;
 });

Answer 2

Ваш функциональный параметр (secs) не является значением input.Этот параметр фактически является ссылкой на событие keydown.Вам необходимо вручную установить для переменной значение value.

. Теперь, когда это невозможно, неясно, зачем вы хотите выполнить эту работу в событии keydown.Вероятно, имеет смысл сделать это, когда пользователь покидает поле, и только если значение поля изменилось, и в этом случае вы захотите событие change.

Кроме того, не используйте.html() метод, когда строка, с которой вы работаете, не содержит HTML.Это открывает дыры в безопасности вашего кода и может снизить производительность.Вместо этого используйте метод .text() для строк, отличных от HTML.

$(document).on('change', function toDateTime() {
  var secs = $('input').val();  // <-- Get the value of the input
  var t = new Date(1970, 0, 1); // Epoch
  t.setSeconds(+secs);
  console.log(t);
  $("#toDate").text(t);
  $('input').focus();
  return t;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="border border-dark text-center card-body">
  <p>Convert Seconds (press tab to leave the field after data entry)</p>
  <input size="16" type="text" id="seconds">
</div>
<hr>
<div class="border border-dark text-center card-body">
  <p>To Date</p>
  <p id="toDate"></p>
</div>

Answer 3

Несколько различий:

1. В вашем коде секунда вернула объект , чтобы получить значение, вам нужно было бы сделать secs.key
2. После исправления вашего кода с # 1, я обнаружил, что он не был количественным .Это только добавит последнюю цифру , а не итоговый ввод .Чтобы исправить это, я изменил его с keydown на keyup и вместо того, чтобы получить значение из функции, я получил значение с помощью jQuery.

$(document).on('keyup', function toDateTime() {
  var secs = $('input').val();
  var t = new Date(1970, 0, 1); // Epoch
  t.setSeconds(secs);
  console.log(t);
  $("#toDate").html(t);
  $('input').focus();
  return t;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="border border-dark text-center card-body">
  <p>Convert Seconds</p>
  <input size="16" type="text" id="seconds">
</div>
<hr>
<div class="border border-dark text-center card-body">
  <p>To Date</p>
  <p id="toDate"></p>
</div>

Answer 4

Я рекомендую вам использовать событие input для захвата каждого изменения от пользователя, также вы должны привязать это событие к самому text-field.Кроме того, используйте контекст this для доступа к элементу text-field и получения текущего значения.

Этот подход ничего не проверяет

$("#seconds").on('input', function () {
  var t = new Date(1970, 0, 1); // Epoch
  t.setSeconds(this.value);

  $("#toDate").html(t);
  $('input').focus();
  return t;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="border border-dark text-center card-body">
  <p>Convert Seconds</p>
  <input size="16" type="text" id="seconds">
</div>
<hr>
<div class="border border-dark text-center card-body">
  <p>To Date</p>
  <p id="toDate"></p>
</div>