没有 AM-PM 和 min-max 的 html5 输入类型时间答案

【问题标题】：html5 input type time without AM-PM and with min-max没有 AM-PM 和 min-max 的 html5 输入类型时间
【发布时间】：2017-07-24 14:21:31
【问题描述】：

如何在此输入中删除 AM=PM 部分

&lt;input type='time' min='1:30' max='2:30'&gt;

另外，如您所见，我尝试将 min 和 max 添加为时间本身但没有用，我怎样才能让它工作？每次我尝试在没有AM-PM的情况下提交它时，它都会告诉我"Enter a valid value"

【问题讨论】：

您应该使用自定义输入时间来完成这项工作。
是的，使用自定义输入。部分浏览器无法处理type="time"。
html5 time inputs shows 12 hours的可能重复
@Mohammad 我在哪里可以制作或找到这些自定义输入？
在google中搜索jquery自定义时间输入

标签： jquery html

【解决方案1】：

.without_ampm::-webkit-datetime-edit-ampm-field {
   display: none;
 }
 input[type=time]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   -ms-appearance:none;
   appearance: none;
   margin: -10px; 
 }

<!--use step="1" to show seconds-->
   <input type="time" class="without_ampm"  />

【讨论】：

请注意，这不是一个标准化的解决方案，不推荐使用。没有标准化的方法可以做你想做的事。

【解决方案2】：

因为我看到问题的某些方面没有得到解决，所以我添加了以下答案。

为了让您的最小值和最大值起作用，您需要有 2 位数的小时数

<input id="time" type="time" min='01:00' max= '03:00'>

这将输出一个强制执行 AM 的时间，并且只允许凌晨 1 点到 3 点之间的时间。

也是为了pm而已

<input id="time" type="time" min='13:00' max= '15:00'>

这将输出一个强制执行 PM 的时间，并且只允许 1PM 和 3PM 之间的时间。

【讨论】：

【解决方案3】：

使用自定义输入时间，因为：

某些浏览器无法处理输入类型时间，在这种情况下，它会优雅地降级为输入类型文本，但没有任何功能
输入类型时间在每个浏览器上看起来都不同
html5 提供灵活的输入验证，比输入类型 time 得到更好的支持
听起来您想要的是持续时间而不是时间。

以下是使用输入类型文本和输入验证的建议：

<input type="text" name="duration" id="durationForm" maxlength=8 pattern="^((\d+:)?\d+:)?\d*$"
    title="The amount of seconds, optionally preceded by 
           &quot;minutes:&quot; or by &quot;hours:minutes:&quot; 
           (empty or zero leads to an infinite duration)."
    placeholder="hh:mm:ss (empty for infinite duration)" size=30>

以及如何在 JavaScript 中处理输入的建议（请注意，durationFormValue 121、“2:01”和“1:61”都是有效的并且产生相同的结果）：

// two or more digits, to be more precise (might get relevant for durations >= 100h)
var twoDigits = function (oneTwoDigits) {
    if (oneTwoDigits < 10) {oneTwoDigits = "0" + oneTwoDigits}; 
    return oneTwoDigits;
}

var Time = function (durationFormValue) {
    var hmsString = String(durationFormValue);
    var hms = hmsString.match(/^(?:(?:(\d+)\:)?(\d+)\:)?(\d+)$/);
    if (hms === null) {
        throw new TypeError("Parameter " + hmsString + 
                            " must have the format ((int+:)?int+:)?int+");
    }
    var hoursNumber = +hms[1] || 0;
    var minutesNumber = +hms[2] || 0;
    var secondsNumber = +hms[3] || 0;
    this.seconds = twoDigits(secondsNumber % 60);
    minutesNumber += Math.floor(secondsNumber / 60);
    this.minutes = twoDigits(minutesNumber % 60);
    hoursNumber += Math.floor(minutesNumber / 60);
    this.hours = twoDigits(hoursNumber);
};

Time.prototype.equals = function (otherTime) {
    return (this.hours === otherTime.hours) &&    
       (this.minutes === otherTime.minutes) &&
           (this.seconds === otherTime.seconds);
};    

Time.prototype.toString = function () {
    return this.hours + ":" + this.minutes + ":" + this.seconds;
}

【讨论】：

【解决方案4】：

没有 AM-PM 是不可能的。您应该使用自定义输入时间来完成这项工作。

使用BootStrap TimePicker控件做this

【讨论】：

【解决方案5】：

只需添加属性value，默认时间包含秒或添加秒到min 和max 属性。

&lt;input type='time' min='01:30:01' max='02:30:02' &gt;

【讨论】：