Angular 如何避免在日期选择器字段中键入字母？

如何避免在日期选择器字段中键入字母

我正在使用bsDatePicker

我使用了type=number，但收到此警告，无法选择日期

"The specified value "02/03/2020" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?"

---

使用按键事件预防默认方法取消按键事件

试试这个：

或者使用只读属性

<div class="col-xs-12 col-12 col-md-4 form-group">
    <input readonly
     type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker>
  </div>

---

您可以在输入上尝试此keyup事件，如下所示：

<input onkeyup="this.value=this.value.replace(/[^\d]/,'')" >

---

您可以在输入字段中使用模式，而不是type=number

例如：

---

此外，如果您要从日期选择器将值分配给此输入，请将此输入字段设置为只读

如果您不定义数字类型，您可以这样定义：

public taskDate = new Date();

在您的.ts文件中

在.html文件中定义以下代码

 <input type="text" readOnly class="form-contr bsDatepicker
                         placeholder="Select Date" [(ngModel)]="taskDate"
                         [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">

---

不要忘记在输入文本中添加只读标记。

只需键入日期即可解决问题：

<input type="date"
        [minDate]="minDate"
        [maxDate]="maxDate"
        bsDatepicker [(bsValue)]="yourDateValue">

---

使用固定的表达方式谢谢..它很好用！！！，但我无法删除所选日期，然后重试按键事件按键事件不会对所有事件起作用检查此项了解更多信息：修复了我的问题！！谢谢！！谢谢..很好用！！！，但我无法删除所选日期我使用的是只读，因此无法使用删除功能，但当用户在文本字段中输入alphabhet时，您可以使用验证错误。指定的值02/24/2020不符合所需格式YY-MM-dd。->获取此警告

<input type="date"
        [minDate]="minDate"
        [maxDate]="maxDate"
        bsDatepicker [(bsValue)]="yourDateValue">