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

Question

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

我正在使用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+)?"

Answer 1

您可以像这样在输入中尝试此keyup事件：

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

Answer 2

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

例如：<input type="text" pattern="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/\d{4}">

此外，如果您要通过日期选择器将该值分配给此输入，请将该输入字段设置为readonly

Answer 3

您没有定义数字类型，您可以像这样定义：

public taskDate = new Date();

在您的.ts文件中
在.html文件中定义以下代码
 <input type="text" readOnly class="form-contr bsDatepicker
                         placeholder="Select Date" [(ngModel)]="taskDate"
                         [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">

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

Answer 4

尝试一下：

preventDefault on keypress event

<div class="col-xs-12 col-12 col-md-4 form-group">
    <input (keypress)="$event.preventDefault()"
     type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker>
  </div>

或使用只读属性
<div class="col-xs-12 col-12 col-md-4 form-group">
    <input readonly
     type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker>
  </div>

Example

Answer 5

只需输入日期日期即可解决您的问题：

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

Here is an example