How to avoid typing alphabets in date picker field?

Question

How to avoid typing alphabets in date picker field?

I'am using bsDatePicker

I used type="number", But i am getting this warning and i couldn't 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

Use keypress event preventDefault() method to cancels the keypress event.

Try this:

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

or Use readonly attribute

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

Example