ngMask
ngMask copied to clipboard
candreoliveira
ngMask doesn't work well with uib-datepicker-popup
ngMask doesn't work well with ui-boostrap datepicker using ui-bootstrap v14.3.
<input
type="text"
class="form-control bold-border rounded"
name="formData.date"
ng-click="open($event, 'date')"
ng-pattern="/^(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])\/(199\d|[2-9]\d{3})$/"
mask="1?9/3?9/2999"
restrict="reject"
clean="true"
uib-datepicker-popup="MM/dd/yyyy"
datepicker-options="{showWeeks: false, startDate: 1}"
is-open="dateModel.date"
on-open-focus="false"
date-disabled="disabled(date, mode)"
ng-model="formData.date"
required
/>
When I select any date in the datepicker popup the datepicker sets it to a date object and then the mask will kick in. Well because the buffer doesn't get cleared fast enough it would show empty, however, it shows as "Th/r/Oct" for like Thr October 1st 2015. If you cursor through it it will try and erase it to empty.
This goes for typing it into the input field like with a keyboard or selecting date from the datepicker.
Sorry in advance, but was there a solution for this? i'm running into the same issue.
Soo what I did was I figured out that you shouldn't use ng-mask with uib-datepicker you need to force mm/dd/yyyy, yyyy/mm/dd, format because of limitations in uib-datepicker getting out of sync with the text that is inputted. So if you use required/ng-required="conditional statement here" with ng-pattern below it will force the required input use a placeholder to keep UI intuitive to the end-user.
The reason ng-mask won't really work in this use-case is because you input it by the input field it is a string that the uib-datepicker internally will change into a date object. If you don't input text and just select a date it will input the date object which is why ng-mask will not be able to handle the date object string. If you need to allow input from keyboard or datepicker. The other option is to force input from popup or not have the popup use ng-mask with a string format. My way below is more of throwing ng-invalid on the field which will highlight red and show error to the user to put in correct value before it is ng-valid and okay to submit with the other form data in a page.
<input type="text" class="popoverClass form-control bold-border rounded" ng-click="open($event, $index)" placeholder="mm/dd/yyyy" name="popUpDate" uib-datepicker-popup="{{format}}" datepicker-options="{{dateOptions}}" on-open-focus="false" is-open="popUpDatesOpened" date-disabled="disabled(date, mode)" ng-pattern="/^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/(199\d|[2-9]\d{3})$/" ng-model="popUpDate" required />=
