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

Question

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

我正在使用 bsDatePicker

我使用了 type="number"，但是我收到了这个警告并且我不能 select date

"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

使用按键事件preventDefault()方法取消按键事件。

试试这个：

<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 2

您可以像这样在您的输入上尝试这个 keyup 事件：

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

Answer 3

您可以在输入字段中使用模式代替 type="number"

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

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

Answer 4

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

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 5

只需使用类型日期即可解决您的问题：

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

Here is an example

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

How to avoid typing alphabets in date picker field?

angular

typescript

ngx-bootstrap