如何输入没有 am/pm 的时间

Question

我想做一个输入，允许用户添加所花费的时间。我本来希望使用这<input type='time">几乎正是我想要的，我只是不想有上午/下午部分，我也不希望它是 24 小时。我希望用户能够做类似的事情，00:15直到类似的事情2d:40hr:10m。

关于我如何解决这个问题的任何想法。我不确定我是否使用了正确的 html 元素。

我还要指出，我正在使用 AngualrJS 和 bootstrap-ui，它有一个时间函数，与上面的输入法相同，所以如果有人有一个有角度的方法来实现这一点，我也对此持开放态度。

Answer 1

<input class="without" step="1" type="time" ng-model="endTime" />

.without::-webkit-datetime-edit-ampm-field {
   display: none;
 }

使用步骤 1 显示秒字段并使用 CSS 删除 am/pm 字段，还可以使用清除图标和微调器来删除

 input[type=time]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   margin: 0; 
 }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   margin: 0; 
  }

Answer 2

检查这个小提琴。我用 jquery 创建了一种方法。

<input type="time" />
<input type="button" value="Get Am or Pm" />

$("input[type='button']").on("click", function(){
    var amOrPm = "am";
    if($("input[type='time']").val().substring(0,2) < 12){
        amOrpm = "am";
    } else {
        amOrPm = "pm";   
    }

    alert($("input[type='time']").val().substring(0,2)+ amOrPm);
});