有没有办法使用输入类型持续时间。我正试图以某种方式输入,用户添加时间持续时间类似于06:30:27:15 ( hh:mm:ss:ms ),应该只允许(0-23:0-59:0-59:0-59)。任何帮助赞赏!
06:30:27:15 ( hh:mm:ss:ms )
(0-23:0-59:0-59:0-59)
**注意:**我想在Angular2+中实现它。
vktxenjb1#
遗憾的是,HTML输入和JavaScript本身都不支持duration数据类型。<input type="time">用于一天中的某个时间,可能会根据您的区域设置显示AM/PM选择器。最好的办法是使用文本输入,并使用JavaScript事件自动插入:并忽略无效输入。使用pattern属性也会有所帮助。在从JavaScript方面使用它之前,请确保将值转换为数字。给你点东西让你开始。
<input type="time">
:
{ let durationIn = document.getElementById("duration-input"); let resultP = document.getElementById("output"); durationIn.addEventListener("change", function (e) { resultP.textContent = ""; durationIn.checkValidity(); }); durationIn.addEventListener("invalid", function (e) { resultP.textContent = "Invalid input"; });}
{
let durationIn = document.getElementById("duration-input");
let resultP = document.getElementById("output");
durationIn.addEventListener("change", function (e) {
resultP.textContent = "";
durationIn.checkValidity();
});
durationIn.addEventListener("invalid", function (e) {
resultP.textContent = "Invalid input";
}
input:invalid:not(:focus) { background: red; }
<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms"><p id="output"></p>
<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">
<p id="output"></p>
我相信有很多开源库提供了现成的小部件。
ia2d9nvy2#
也许可以试试这样的东西:
<input type="time" step="0.001">
字符串
bvpmtnay3#
<label for="appt">Choose a time for your meeting:</label><input type="time" id="appt" name="appt" min="09:00" max="18:00" required><small>Office hours are 9am to 6pm</small>
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
字符串试试这个...希望这个有帮助!这是我为我的一个项目做的
3条答案
按热度按时间vktxenjb1#
遗憾的是,HTML输入和JavaScript本身都不支持duration数据类型。
<input type="time">
用于一天中的某个时间,可能会根据您的区域设置显示AM/PM选择器。最好的办法是使用文本输入,并使用JavaScript事件自动插入
:
并忽略无效输入。使用pattern属性也会有所帮助。在从JavaScript方面使用它之前,请确保将值转换为数字。给你点东西让你开始。我相信有很多开源库提供了现成的小部件。
ia2d9nvy2#
也许可以试试这样的东西:
字符串
bvpmtnay3#
字符串
试试这个...希望这个有帮助!这是我为我的一个项目做的