9

我已经能够在我设计的表单中使用带有 min 和 max 属性的输入类型 date ，并尽可能地利用 HTML 5。不过，如果输入类型是time ，我就不能这样做了。

相关代码：

<input style='width:120px' required name='dia' id='dia' type='date' min="1991-01-01" max="2014-05-12">
<input style='width:80px' required name='hora' id='hora' type="time" min="08:00:00" max="20:00:00"/>

（后者中的最小值和最大值被忽略）

其他相关信息：

  • 据我所知，HTML 5 规范在这两种情况下都允许最小值和最大值。

  • 我正在为这个表单使用 minimizr 和 webshims，这使得输入日期字段在 FF 等中可用。

  • 在最近的主要浏览器之间没有检测到不同的行为。

  • 像 W3C 学校这样的网站提到日期的最小值和最大值，但没有提到时间，这可能表明普遍缺乏对最小值和最大值作为时间属性的热情。

我错过了一些明显的东西吗？

4

2 回答 2

5

有用。它会在提交时触发，输入大于或等于 08:00 的时间。（在 chrome 中测试）
其他一些浏览器忽略了属性 min、max、required，所以也要注意用 JS 来做。

于 2013-05-12T10:22:49.297 回答
0

我正在试验最大和最小时间输入，我发现如果您在 Chrome 上有一个带有普通提交输入按钮的表单，它将被触发。但另一方面，如果您让您的 javascript 在有或没有用户确认的情况下提交表单，则它不起作用。它将提交从不显示最大值和最小值触发消息的时间。我举了一个例子来说明我的意思。

var confirmString = "Do you confirm?";
 
function sendRemote(){
  if (confirm(confirmString)==true) {
      document.getElementById('remoteForm').submit(); 
  } 
  else {
  } 
}
<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<body>



<form action='/' method='post' id='remoteForm'>
  <input type="time" id="appt" name="appt" min="00:00" max="09:59" required>
  <small>Max 9h59</small>
  <br>
  <br>
  <input class='btn btn-danger' type='submit' value='Send with Ordinary Form Submit Input'> 
  <p>It tells you inserted a value that exceeds the maximum time</p>
  <br>
  <br>                            
  <button type='button' class='btn btn-danger' onclick='sendRemote()'>Send with DOM submit</button>
  <p>It does not tell you inserted a value that exceeds the maximum time</p>
</form>

</body>
</html>

于 2021-09-08T09:06:26.467 回答