jquery - 我怎样才能让用户在不打扰他们的情况下将持续时间输入到 HTML5 网络表单中？

Question

我的用户需要输入以天、小时和分钟为单位的持续时间。

现在我只是将其实现为三个字段，这没问题并且可以工作，但这并不是一个很好的设计。另一种方法是只有 1 个字段，让他们输入 2 天 3 小时 45 分钟 或 15 m，或 1d 2h 35m 或90m，或 2 days 等。这似乎需要一些重要的解析才能真正正确，并且国际化很复杂。

允许用户简单地输入时间长度的 Web UI 组件有哪些“最佳实践”示例？

请注意，这不是DatePicker，而是持续时间输入组件。

Answer 1

在考虑了此处的反馈后，我决定实现一个具有简洁输入样式和一些智能解析的单一表单字段。参见 http://jsfiddle.net/davesag/qgCrk/6/对于最终结果。当然欢迎改进。

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

  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 a number of seconds.
function parseDuration(sDuration) {
  if (sDuration == null || sDuration === '') return 0;
  mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);
  hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);
  drx = new RegExp(/([0-9])[ ]?d/);
  days = 0;
  hours = 0;
  minutes = 0;
  if (mrx.test(sDuration)) {
    minutes = mrx.exec(sDuration)[1];
  }
  if (hrx.test(sDuration)) {
    hours = hrx.exec(sDuration)[1];
  }
  if (drx.test(sDuration)) {
    days = drx.exec(sDuration)[1];
  }

  return to_seconds(days, hours, minutes);
}