HTML5 输入类型时间设置值不起作用答案

【问题标题】：HTML5 input type time setting values not workingHTML5 输入类型时间设置值不起作用
【发布时间】：2014-09-14 03:02:16
【问题描述】：

我有一个输入类型时间的表单。我正在尝试设置值。但它没有显示。这是我的代码。

<input type="time" name="exit" id="teacher-entry-exit-form-exit-input" class="form-control" value="08:56 AM" required="">

我做错了什么？

【问题讨论】：

尝试使用谷歌：w3schools.com/jsref/prop_input_time_value.asp jsfiddle.net/q29qt4zg
见stackoverflow.com/a/36758501/4640499

标签： html input time format

【解决方案1】：

它基于 24 小时制，因此使用 value="08:56" 表示上午，value="20:56" 表示下午。

Example Here

<input type="time" value="08:56">

见：http://www.w3.org/TR/html-markup/input.time.html

【讨论】：

可以像这样插入上午或下午

【解决方案2】：

Stephen, Giri, 为了设置 AM/PM，您只需将 12 小时时间字符串转换为 24 小时时间字符串，然后将其传递给 input [type=time] 的 value 属性。

这里是一个快速的example 如何转换 12 小时 -> 24 小时时间字符串。

const am_pm_to_hours = time => {
    let hours = Number(time.match(/^(\d+)/)[1]);
    let minutes = Number(time.match(/:(\d+)/)[1]);
    const AMPM = time.match(/\s(.*)$/)[1];
    if (AMPM.toLowerCase() === "pm" && hours < 12) hours = hours + 12;
    if (AMPM.toLowerCase() === "am" && hours == 12) hours = hours - 12;

    let sHours = hours.toString();
    let sMinutes = minutes.toString();
    if (hours < 10) sHours = "0" + sHours;
    if (minutes < 10) sMinutes = "0" + sMinutes;

    return `${sHours}:${sMinutes}`;
}

希望这会有所帮助:)

【讨论】：

【解决方案3】：

这对我有用：

<input class="form-control" type="time" name="time" value="<?=date("H:i", strtotime($dbObject['time'])); ?>" />

这样就可以使用PHP和mysql来获取时间列并显示出来。

【讨论】：

【解决方案4】：

将 AM/PM 时间字符串转换为 24 小时格式。示例 9:30 PM 到 21:30

function convertTimeFrom12To24(timeStr) {
  var colon = timeStr.indexOf(':');
  var hours = timeStr.substr(0, colon),
      minutes = timeStr.substr(colon+1, 2),
      meridian = timeStr.substr(colon+4, 2).toUpperCase();
    
  var hoursInt = parseInt(hours, 10),
      offset = meridian == 'PM' ? 12 : 0;
  
  if (hoursInt === 12) {
    hoursInt = offset;
  } else {
    hoursInt += offset;
  }
  return hoursInt + ":" + minutes;
}
console.log(convertTimeFrom12To24("12:00 AM"));
console.log(convertTimeFrom12To24("12:00 PM"));
console.log(convertTimeFrom12To24("11:00 AM"));
console.log(convertTimeFrom12To24("01:00 AM"));
console.log(convertTimeFrom12To24("01:00 PM"));

【讨论】：