角度输入时间掩码

Question

我有反应形式的这个输入（材料 2）。而且我知道在此输入上放置时间掩码 (hh:mm) 的更好方法。或者我怎样才能为此建立一个指令？

<div class="col-md-2 hours">
  <label for="floating-placeholder">Horário</label>
  <div>
    <input class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end" minlength="4" maxlength="4" formControlName="start">
    às
    <input class="col-md-5 end" matInput placeholder="hh:mm" value=""  name="end" formControlName="end">
  </div>
</div>

Answer 1

这就是我解决这个问题的方法：

首先我安装这个模块：https : //www.npmjs.com/package/angular2-text-mask2

然后，我在组件 ts 中创建一个自定义掩码

public maskTime = [/[1-9]/, /\d/,':',/\d/, /\d/]

最后，我把指令放在输入中

  <div class="col-md-2 hours">
    <label for="floating-placeholder">Horário</label>
    <div>
      <input type="text" [textMask]="{mask: maskTime, guide: false}" class="col-md-5 end" matInput placeholder="hh:mm" value="" name="end"  formControlName="start">às
      <input type="text" [textMask]="{mask: maskTime, guide: false}" class="col-md-5 end" matInput placeholder="hh:mm" value=""  name="end" formControlName="end">
    </div>
  </div>

Answer 2

对时间值使用标准 HTML 输入类型。

<input class="col-md-5 end" matInput name="end" formControlName="start" type="time">

有关更多信息，请参阅MDN 文档。