如何使用HTML5或/或Angular8实现持续时间选择器，时间超过24小时？

我正在尝试实现一个控件，使用

 <input type="time"/>

或者只是

  <input type="text"/>

并实现一个持续时间选择器控件，该控件的小时格式可以超过24小时，类似于000:00:00或hhh:mm:ss，并且没有am/pm选项（时间的默认输入类型具有am/pm格式的格式，这在我的示例中不有用）。 需求是能够使用向上键和向下键增加或减少持续时间，这与HTML的默认输入类型time非常相似

是否有任何本机的

HTML

、

angular

或材料组件？ 或者有没有一种方法可以使用正则表达式/模式或其他什么来实现这一点？

请检查此解决方案。它提供了您正在寻找的选项

这是演示-

演示显示Y:M:W:D:H:M:S格式。可以使用文档中定义的标志隐藏参数

---

由于您正在寻找具有单个输入的持续时间选择器，因此创建自己的组件将非常方便。 可以考虑格式化程序和解析器的概念。 查看这些主题，帮助您实现这一目标

https://netbasal.com/angular-formatters-and-parsers-8388e2599a0e
https://stackoverflow.com/questions/39457941/parsers-and-formatters-in-angular2

以下是更新的示例演示-

您可以使用keyup/keydown事件函数实现增加/减少功能

handle(event) {
    let value = event.target.value; //hhh:mm:ss
    if(event.key === 'ArrowUp') {
        console.log('increase');
    } else if (event.key === 'ArrowDown') {
        console.log('decrease');
    } else {

       //dont allow user from entering more than two digits in seconds
    }
}

您需要考虑的验证：：

  - If user enters wrong input, show error message / block from entering anything other than numbers
  - allowing only unit specific digits - (Ex :: for hr - 3 digits, mm - 2 digits etc as per your requirement)

---

要做一些更有趣的事情或使其看起来像是交互式的，您可以使用

flipclock.js

外观非常酷，使用它也是可行的

以下是链接：-

---

我能想到的一种方法是编写自定义控件（正如@Allabakash所提到的）。对于本机HTML，控件可以如下所示：

window.addEventListener（'DOMContentLoaded'，（事件）=>{
document.querySelectorAll（“[my duration picker]”）。forEach（picker=>{
//防止不受支持的密钥
const acceptedKeys=['Backspace'，'ArrowLeft'，'ArrowRight'，'ArrowDown'，'ArrowUp']；
const selectFocus=event=>{
//获取光标位置并选择最近的块；
const cursorPosition=event.target.selectionStart；
“000:00:00”//这是用于确定光标位置的格式
const hourMarker=event.target.value.indexOf（“：”）；
const minuteMarker=event.target.value.lastIndexOf（“：”）；
if（小时标记<0 | |分钟标记<0）{
//格式有问题。请返回；
返回；
}
if（光标位置<小时标记）{
event.target.selectionStart=0；//小时模式
event.target.selectionEnd=小时标记器；
}
if（光标位置>小时标记器和光标位置<分钟标记器）{
event.target.selectionStart=hourMarker+1；//分钟模式
event.target.selectionEnd=分钟标记器；
}
if（光标位置>分钟标记器）{
event.target.selectionStart=minuteMarker+1；//秒模式
event.target.selectionEnd=分钟标记+3；
}
}
常量insertFormatted=（输入框，第二个值）=>{
让小时数=数学下限（第二个值/3600）；
第二个值%=3600；
让分钟数=数学下限（第二个值/60）；
设秒=秒值%60；
分钟=字符串（分钟）.padStart（2，“0”）；
小时=字符串（小时）.padStart（3，“0”）；
秒=字符串（秒）.padStart（2，“0”）；
inputBox.value=小时+“：”+分钟+“：”+秒；
}
常量增量值=输入框=>{
const rawValue=inputBox.value；
sectioned=rawValue.split（“：”）；
设secondsValue=0
如果（分段长度===3）{
第二个值=编号（分段[2]）+编号（分段[1]*60）+编号（分段[0]*60*60）；
}
第二个值+=1；
insertFormatted（输入框，第二个值）；
}
常量递减值=输入框=>{
const rawValue=inputBox.value；
sectioned=rawValue.split（“：”）；
设secondsValue=0
如果（分段长度===3）{
第二个值=编号（分段[2]）+编号（分段[1]*60）+编号（分段[0]*60*60）；
}
第二个值-=1；
如果（第二个值<0）{
第二个值=0；
}
insertFormatted（输入框，第二个值）；
}
const validateInput=事件=>{
sectioned=event.target.value.split（“：”）；
如果（分段长度！==3）{
event.target.value=“000:00:00”；//回退到默认值
返回；
}
if（isNaN（分段[0]））{
分段[0]=“000”；
}
if（isNaN（分段[1]）| |分段[1]<0）{
分段[1]=“00”；
}
if（分段[1]>59 | |分段[1]。长度>2）{
分段[1]=“59”；
}
if（isNaN（分段[2]）| |分段[2]<0）{
分段[2]=“00”；
}
如果（分段[2]>59 | |分段[2]。长度>2）{