Search code examples
angularjsangular-ui-bootstrapbootstrap-datepicker

restrict uibDatepicker pop up to accept only digits and '-'

I have a requirement that I need to let user only enter digits and - into date picker and prevent user from entering other characters, how can I achieve this?

for example I want prevent user from entering text like asasdfas in input field for datepicker.

I used this code in parseDate function inside uibDatepicker code but view doesn't get updated.

 var regex = /[^0-9\-]/g;
 viewValue = viewValue.replace(regex, '');

here is a plunk to play around: http://plnkr.co/edit/AKFhTG162Ck5Blt0ZBH7?p=preview

Solution

  • Changing the input type to date restricts the user from inputting any extra text. 

    <input type="date" />

    The problem is that enables the HTML5 default date picker. I have added a little css to hide that part but you would need to check it other browsers. I was unable to remove the arrows and again I will leave you to do it.

    Hope it helps. I forked your PLUNK HERE