input type="time"

time类型的<input>元素 创建输入字段，允许轻松输入时间。

控件的用户界面从浏览器到浏览器有所不同，跨浏览器支持在现代浏览器中通常是很好的，只有Safari在编写本文时不支持它。在Safari中，控件会优雅地降低到简单<input type="text">。

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

在Chrome / Opera中，time控件非常简单，可以插入小时和分钟（24小时制）的插槽，上下箭头可以迭代显示的值，使用十字按钮清空控件。

Firefox的time控制非常相似，只是它没有上下箭头，并且是12小时的时钟（有一个额外的插槽来指定AM或PM）。

边缘time控制更精细一点，打开滑动卷轴（也是24小时）的小时和分钟选择器：

值

DOMString表示输入到输入中的时间的值。您可以通过在value属性中包含日期来为输入设置默认值，如下所示：

<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30">

需要注意的是，显示的时间格式可能与实际情况有所不同value- 显示的时间格式将根据用户操作系统的设置区域设置进行选择，而日期value始终格式化hh:mm。当上述值提交给服务器时，例如某些浏览器显示为13:30，有些显示为1.30 PM，但提交的值总是看起来像appt-time=13%3A30。

您还可以使用HTMLInputElement.value属性在JavaScript中获取和设置日期值，例如：

var timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

使用时间输入

时间输入乍看起来很方便 - 它们为选择时间提供了一个简单的用户界面，并且将发送到服务器的数据格式规范化，而不管用户的区域设置如何。但是，<input type="time">由于所有浏览器都无法保证浏览器的支持，因此存在一些问题。

我们将考虑基本的和更复杂的用途<input type="time">，然后就减轻浏览器支持问题提供建议（请参阅处理浏览器支持）。

时间的基本用法

最简单的使用<input type="time">涉及基本<input>和<label>元素组合，如下所示：

<form>
  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" type="time" name="appt-time">
</form>

控制输入​​大小

<input type="time">不支持表单大小属性，如size。你将不得不求助于CSS的大小需求。

使用步骤属性

您可以使用该step属性来改变时间递增的时间量。但是，这在浏览器中有一些奇怪的效果，所以不完全可靠。

它需要一个整数值，等于你想增加的秒数。如果您选择小于60秒（1分钟）的值，则会导致time输入在小时和分钟旁边显示一个秒输入区域：

<form>
  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" type="time" name="appt-time" step="2">
</form>

但是，这似乎只对Chrome / Opera有效果，Chrome / Opera是唯一显示向上/向下迭代箭头的浏览器 - 点击这些会导致秒的值每次迭代两秒，但是对于小时或分钟（如果你想迭代的分钟或小时，你需要相当于这些值的适当的倍数，例如120 2分钟，或7200 2小时）。

这些步骤的值在Firefox或Edge中似乎没有效果。另外，它似乎会导致验证无法正常工作（如下一节所述）。

验证

默认情况下，<input type="time">不对输入的值应用任何验证。UI实现通常不会让你输入任何不是日期时间的东西 - 这很有帮助 - 但是你仍然可以不填写日期时间并提交，或者输入无效的日期时间（例如4月32日）。

设置最大和最小时间

您可以使用min和max属性来限制用户可以选择的有效时间。在下面的例子中，我们将最小时间12:00和最大时间设置为18:00：

<form>
  <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
  <input id="appt-time" type="time" name="appt-time"
         min="12:00" max="18:00">
  <span class="validity"></span>
</form>

这是上面例子中使用的CSS。这里我们利用:valid和:invalidCSS属性来根据当前值是否有效来设置输入的样式。我们必须将图标放在<span>输入旁边，而不是输入本身，因为在Chrome中生成的内容放置在表单控件中，无法有效地进行样式化或显示。

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute;
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

其结果是：

• 只有12:00至18:00之间的时间将被视为有效 - 超出该范围的时间将被视为无效。

• 根据您使用的浏览器，您可能会发现超出指定值的时间甚至可能在时间选择器（例如Edge）中无法选择。

需要时间

此外，您可以使用该required属性来强制填写时间。因此，如果您尝试提交超出设定范围的时间或空的日期字段，支持的浏览器将显示错误。

我们来看一个例子 - 在这里我们设置了最小和最大时间，并且还要求这个字段：

<form>
  <div>
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required>
    <span class="validity"></span> </form>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

如果您尝试使用不完整的日期提交表单（或者设置的界限以外的日期），则浏览器显示错误。现在尝试玩这个例子：

这里是未使用支持浏览器的人的截图：

重要说明：HTML表单验证 不能 取代服务器端脚本，以在被允许进入数据库之前确保输入的数据格式正确。有人很容易调整HTML，使他们绕过验证，或完全删除它。也有人可能完全绕过你的HTML，直接提交数据到你的服务器。如果您的服务器端代码无法验证其接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到您的数据库时，可能会导致灾难。

处理浏览器支持

如上所述，在编写本文时使用时间输入的主要问题是浏览器支持 - Safari不支持在桌面上，老版本的IE不支持。

Android和iOS等移动平台可以很好地利用这些输入类型，提供专业的UI控件，使得在触摸合成环境中选择值变得非常简单。例如，timeAndroid版Chrome 的选取器如下所示：

不支持的浏览器会优雅地降级为文本输入，但是这会在用户界面的一致性（所呈现的控件将不同）和数据处理方面产生问题。

第二个问题是最严重的 - 就像我们之前提到的那样，time输入的实际值总是被格式化hh:mm。另一方面，使用文本输入时，浏览器默认不知道日期应采用何种格式，人们可以通过多种方式写入时间，例如：

• 3.00 pm

• 3:00pm

• 15:00

• 3 o'clock in the afternoon

• etc.

解决这个问题的一个方法就是pattern在time输入中添加一个属性。即使time输入不使用它，文本输入后备将会。例如，请尝试在非支持的浏览器中查看以下演示：

<form>
  <div>
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
    <input id="appt-time" type="time" name="appt-time"
           min="12:00" max="18:00" required
           pattern="[0-9]{2}:[0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
      <input type="submit" value="Submit form">
  </div>
</form>

如果您尝试提交，则会看到非支持浏览器现在会显示一条错误消息（并且如果输入与模式不匹配，则将输入高亮显示为无效）nn:nn，其中n的数字为0到9.当然，这不会阻止人们输入无效的日期，也不会阻止格式化后的格式化日期。

用户将要了解他们需要输入时间和日期的模式？

我们仍然有一个问题。

目前以跨浏览器方式处理表单时间的最佳方法是让用户在单独的控件中输入小时数和分钟数（如果需要，可以输入秒数）（<select>元素正在流行 - 请参阅下面的实现），或使用JavaScript库（如jQuery日期选择器）和jQuery timepicker插件。

例子

在这个例子中，我们创建了两组用于选择时间的UI元素 - 一个使用本地输入创建的本地选取器<input type="time">，以及一组两个<select>元素，用于在不支持本机输入的旧版浏览器中选择小时/分钟。

HTML看起来像这样：

<form>
  <div class="nativeTimePicker">
    <label for="appt-time">Choose an appointment time (opening hours 12:00 to 18:00): </label>
      <input id="appt-time" type="time" name="appt-time"
             min="12:00" max="18:00" required>
      <span class="validity"></span>
    </div>
  <p class="fallbackLabel">Choose an appointment time (opening hours 12:00 to 18:00):</p>
  <div class="fallbackTimePicker">
    <div>
      <span>
        <label for="hour">Hour:</label>
        <select id="hour" name="hour">
        </select>
      </span>
      <span>
        <label for="minute">Minute:</label>
        <select id="minute" name="minute">
        </select>
      </span>
    </div>
  </div>
</form>

小时和分钟值是动态生成的。

该代码可能会感兴趣的另一部分是特征检测码-来检测浏览器是否支持<input type="time">，我们创建了一个新的<input>元素，设置其type到time，然后立即检查什么的类型设置为-不支持的浏览器将返回text，因为这个time类型会回到类型text。如果<input type="time">不支持，我们隐藏本地选择器，<select>而是显示后备选取器UI 。

// define variables
var nativePicker = document.querySelector('.nativeTimePicker');
var fallbackPicker = document.querySelector('.fallbackTimePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var hourSelect = document.querySelector('#hour');
var minuteSelect = document.querySelector('#minute');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'time';
// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the hours and minutes dynamically
  populateHours();
  populateMinutes();
}

function populateHours() {
  // populate the hours <select> with the 6 open hours of the day
  for(var i = 12; i <= 18; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes <select> with the 60 hours of each minute
  for(var i = 0; i <= 59; i++) {
    var option = document.createElement('option');
    option.textContent = (i < 10) ? ("0" + i) : i;
    minuteSelect.appendChild(option);
  }
}

// make it so that if the hour is 18, the minutes value is set to 00
// — you can't select times past 18:00
 function setMinutesToZero() {
   if(hourSelect.value === '18') {
     minuteSelect.value = '00';
   }
 }

 hourSelect.onchange = setMinutesToZero;
 minuteSelect.onchange = setMinutesToZero;

规范

浏览器兼容性