Angular mask ui does not work with angular -ui datepicker

Question

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

When I use this, the input is assigned to the ng-invalid-date classes, even if the date is valid. Date and date are cleared after I focus outside the field.

I do not 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 an item to see the classes assigned to it.

Answer 1

, ( ). ui-mask , uib-datepicker , : uib-datepicker-popup="MMddyyyy", :

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

, (), model-view-value="true", :

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

Answer 2

,

datepicker-popup

datepicker-popup="MM/dd/yyyy"

Answer 3

ui-mask , :

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