angular ui mask not working with angular-ui datepicker

Question

I am trying to use angular-ui-mask with angular-ui-bootstrap datepicker component.

When I use this, the input gets assigned with ng-invalid-date classes even though the date is valid date and date gets cleared after I focus out of the field.

I don't want to use HTML input with type='date' as it is not supported by all browsers.

plunker for the same:

http://plnkr.co/edit/dW4AIlF37CLbSHf553d3?p=preview

  <input type="text" class="form-control" ui-mask="99/99/9999" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

Inspect element to see classes assigned to it.

Answer 1

Luiz's answer was kinda right, but very unclear (if you want the slashes removed). Since by default ui-mask will strip out the placeholders, you need to send it to the uib-datepicker-popup without them by using: uib-datepicker-popup="MMddyyyy", e.g:

<input type="text" uib-datepicker-popup="MMddyyyy" ui-mask="99/99/9999" ... >

Alternatively, if you want to keep the placeholder (slashes) you can set model-view-value="true", e.g:

<input type="text" uib-datepicker-popup="MM/dd/yyyy" ui-mask="99/99/9999" model-view-value="true" ... >

Answer 2

I don't understand why you want to use the mask

you need to use the option datepicker-popup and provide your formatting in it

datepicker-popup="MM/dd/yyyy"

Answer 3

The ui-mask don't send to backend the fillings, so to use it you will need to do like this:

 <input type="text" class="form-control" ui-mask="99/99/9999" uib-datepicker-popup="ddMMyyyy" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />