时间戳

首页 > 解决方案 > 如何在html中选择特定的时间范围

javascript - 如何在html中选择特定的时间范围

问题描述

我想要特定时间的时间输入字段，以便只能选择从上午 8 点到晚上 8 点的时间。无法选择从晚上 8:01 开始预订的预订，直到早上 7:59 的预订。如何使用 JavaScript/Jquery 制作这个自定义时间选择器？

<input name="booking-time" type="time" id="book_time">

标签： javascripthtmljquery

解决方案

要在所需范围内选择时间，您可以添加最小值和最大值：

function show() {
  let t = document.getElementById("book_time");
  console.log(t.value);
}

function show2() {
  let t2 = document.getElementById("book_time2");
  let t2Hour = t2.value.substr(0, 2);
  let t2Minute = t2.value.substr(3, 2);
  if (t2.value.substr(0, 2) < t2.min) {
    alert("Earliest time is " + t2.min);
    t2.value = t2.min;
  } else if (t2.value.substr(0, 2) > t2.max){
    alert("Latest time is " + t2.max);
    t2.value = t2.max;
  } else {
    console.log(t2.value);
  }
}
#book_time::after {
  content: "___";
  position: relative;
  left: -20px;
  line-height:1.5em;
  background-color: white;
  color: white;
}
<input type="time" id="book_time" name="booking-time" min="08:00" max="20:00" required onchange="show();">
<input type="time" id="book_time2" name="booking-time2" min="08:00" max="20:00" required onchange="show2();">

更新

好像是浏览器的问题。一些浏览器会尊重最小/最大值，而其他浏览器则不会。那些在 HH:MM 显示右侧不显示时钟符号的那些。那些会显示向上/向下箭头。

上面更新的代码段提供了两种可能的解决方案。

第一个隐藏时钟符号，方法是用 css 样式中的 ::after 伪选择器定义的白色背景上的白色文本块覆盖它。不利的一面是没有什么可以告诉用户该做什么 - 他们必须知道点击输入的小时部分并使用他们的向上/向下箭头键来更改小时值。此外，框右侧会有无法删除的空白。

第二个使用 javascript 来确认选择的小时是否在允许的范围内。如果他们选择了这些时间之外的任何内容，他们会收到警报，并且他们的时间会根据需要设置为最小值或最大值。

唯一的其他解决方案是为小时和分钟提供单独的选择列表，并以这种方式限制范围。这不像简单的输入框那样优雅，但确实确保用户无法选择无效值。

推荐阅读