HTML поле ввода с автоматическим извлечением детализации из минут, часов и дней

Question

Мне нужно поле для ввода длительности.

У пользователя будет возможность установить эту длительность в minutes, hours или days

Для Например, я хотел бы дать возможность иметь такие входные данные, как:

1m
8.5 h
3d

et c

Я преобразую значение в минуты, прежде чем отправить значение на сервер.

Знаете ли вы некоторые входные плагины, чтобы иметь это?

Answer 1

Используя момент. js, вы можете разрешить вводы следующим образом:

const threeMinuts = '3m';       // 3 minutes
const eightHours  = '8.5 h';    // 8.5 hours
const threeDays   = '3 days';      // 3 days

Затем вам нужно отделить числовое значение от единицы измерения:

const numberValue = Number(input.match(/(\d|\.|,)+/)[0]);
const unit = input.match(/[a-z]+/)[0];

, после чего вы можете передать длительность моменту следующим образом:

const duration = moment.duration(numberValue, unit);

например:

const duration = moment.duration(8.5, 'h');

Answer 2

Сначала вы создаете ввод

<input id="time" type="time">

Наконец, вы добавляете значение к вводу, используя javascript

document.getElementById("time").value = new Date().toTimeString().slice(0,8);

Answer 3

Поскольку я предпочитаю чистые JS и никаких библиотек (с большими накладными расходами), здесь можно просто приспособить JS для этой задачи (например, регулярное выражение для часов (/ ([0-9] 0-9?) [ ]? h /) для цифр) как вам нравится:

function toSeconds(dd,hh,mm) {
 var d = parseInt(dd);
  var h = parseInt(hh);
  var m = parseInt(mm);
  if (isNaN(d)) d = 0;
  if (isNaN(h)) h = 0;
  if (isNaN(m)) m = 0;

 var t = d * 24 * 60 * 60 +
      h * 60 * 60 +
      m * 60;
  return t;
}

/* Expects 1d 11h 11m, or 1d 11h, or 11h 11m, 
or 11h, or 11m, or 1d returns number of seconds */
function parseInput(sInput) {
  if (sInput== null || sInput=== '') return 0;
  var mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);
  var hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);
  var drx = new RegExp(/([0-9])[ ]?d/);
  var days = 0;
  var hours = 0;
  var minutes = 0;
  if (mrx.test(sInput)) {
    minutes = mrx.exec(sInput)[1];
  }
  if (hrx.test(sInput)) {
    hours = hrx.exec(sInput)[1];
  }
  if (drx.test(sInput)) {
    days = drx.exec(sInput)[1];
  }

  return toSeconds(days, hours, minutes);
}

Answer 4

1. Назначьте каждый <input> type="number" и min="0".

2. Затем max="23" для часов и max="59" для минут.

3. Добавление скрытого ввода с атрибутом name.

4. Если вы этого еще не сделали, оберните все в <form> и зарегистрируйте его в событии "input".

5. Создайте обработчик события извлечь и вычислить значения всех входов, а затем присвоить итоговое значение скрытому вводу.

6. Когда передано <form>, скрытое значение ввода будет отправлено, так как оно имеет атрибут name.

Кстати, на самом деле это не очень хороший пользовательский интерфейс, когда пользователь вводит столько значений в одном входе. Вы должны предоставить пользователю четко определенные поля, которые требуют от пользователя ввода данных без дополнительных сложностей.

---

Демо

document.forms.duration.oninput = toMinutes;

function toMinutes(e) {
  const dur = this.elements;
  let time;
  if (e.target.tagName === 'INPUT') {
    let d = Number(dur.days.value) * 1440;
    let h = Number(dur.hours.value) * 60;
    let m = Number(dur.minutes.value);
    time = d + h + m;
    dur.time.value = time;
  }
  console.log(dur.time.value);
}

:root,
body {
  font: 400 3vw/1.45 Consolas
}

fieldset {
  width: max-content;
}

label,
input {
  width: 6.5ch;
  display: inline-block;
  margin: 4px;
}

input {
  height: 3vw;
  line-height: 1;
  font: inherit;
  text-align: right
}

.as-console-wrapper {
  width: 40%;
  min-height: 100%;
  margin-left: 60%;
}
  

<form id='duration'>
  <fieldset>
    <legend>Duration</legend>
    <label for='days'>Days: </label>
    <input id='days' type='number' min='0' value='0'><br>
    <label for='hours'>Hours: </label>
    <input id='hours' type='number' min='0' max='23' value='0'><br>
    <label for='minutes'>Minutes: </label>
    <input id='minutes' type='number' min='0' max='59' value='0'><br>
  </fieldset>
  <input id='time' name='time' type='hidden'>
</form>