代码之家 › 专栏 › 技术社区 › carloslopez

设置输入时间的分钟范围HTML5

minute hour range angular html

0

carloslopez · 技术社区 · 2 年前

我有一个Angular项目,其中一个组件的输入时间如下:

<div class="start">
   <p>Inicio:</p>
   <input type="time" class="form-control"/>
</div>

是否可以在输入的分钟内设置一个范围?我的意思是,当我必须在这个输入中选择一个小时时,我需要选择一小时一分钟。我希望只可视化分钟00和分钟30,而不是所有的分钟00、01、02、03…59

1 回复 | 直到 2 年前

1

2

Dai 2 年前

你所描述的并不是一个真正的“范围”——你想要的是设置决议输入的时间从1分钟变为30分钟。

And you can do that with the step="" attribute 对于 type="time" 这个 step=“” 属性的单位为秒 ,所以30分钟就是1800秒:

<input type="time" step="1800" />

…但是,似乎没有一个主要的浏览器支持 step=“” 具有的属性 type=“时间” 然而(使用Chrome 117时,它会遇到 阶跃失配 ,这意味着Chrome内部支持 step 属性,但不将时间选择器UI约束为 步 )。

合理的替代方案:

我想是这样的:

<select>
    <option>00:00</option>
    <option>00:30</option>
    <option>01:00</option>
    <option>01:30</option>
    <option>02:00</option>
    <option>02:30</option>
    <option>03:00</option>
    <option>03:30</option>
    <option>04:00</option>
    <option>04:30</option>
    <option>05:00</option>
    <option>05:30</option>
    <option>06:00</option>
    <option>06:30</option>
    <option>07:00</option>
    <option>07:30</option>
    <!-- etc -->
    <option>22:00</option>
    <option>22:30</option>
    <option>23:00</option>
    <option>23:30</option>
</select>

2

0

Kaysar 2 年前

提交包含时间输入的表单时,在将值包含在表单的数据中之前对其进行编码。时间输入的表单数据项将始终以name=hh%3Amm或name=hh%3Amam%3ss的形式出现(如果包含秒) ...More Details

因此,底线是,它是一个内置的浏览器功能,没有可用的属性来更改格式。

此外 step="" 属性仅适用于键盘上下箭头,但在使用鼠标选择时间时不起作用。

现在,根据您的场景,正如您所提到的,这是一个Angular项目,并且您希望使用仅包含00和30的分钟字段,可以通过多种方式实现。

您可以使用input type=“text”并设置一个00和30的下拉列表,然后将该列表与输入文本字段绑定,这样当从下拉列表中选择一个值时,它将为文本输入字段设置相同的值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="">
  Minutes : <input type="text" size="2" value="{{mm}}">
  <select ng-model="mm">
    <option value="00">00</option>
    <option value="30">30</option>
  </select>
</div>

您还可以使用简单的JavaScript函数和事件触发器来设置输入字段所需的值

function show(dID) {
  var elmnt = document.getElementById(dID);
  elmnt.style.display="inline-block";
}
function setVal(el,mValue,target) {
  var elmnt = document.getElementById(target);
  elmnt.value=mValue;
  el.parentElement.style.display="none";
}

#cont-list {
  display: none;
  border: 1px solid black;
}
#cont-list p {
  padding: 2px 0px;
  margin: 0px;
  width: 40pt;
  text-align: right;
  cursor: pointer;
}
#cont-list p:hover {
  background: #eee;
}

Minutes:<br><input id="mm" type="text" size="2" onclick="show('cont-list')"><br>
<div id="cont-list">
  <p onclick="setVal(this,'00','mm')">00</p>
  <p onclick="setVal(this,'30','mm')">30</p>
</div>