5

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.

Anil
  • 2,539
  • 6
  • 33
  • 42
Sreekanth
  • 503
  • 1
  • 5
  • 10

3 Answers3

2

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" ... >
Adam Plocher
  • 13,994
  • 6
  • 46
  • 79
0

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"
Ali Adravi
  • 21,707
  • 9
  • 87
  • 85
  • 2
    datepicker-popup provides formatting when user selects date from datepicker control. My requirement is to apply formatting(masking) when user types in the date manually instead of selecting from datepicker. – Sreekanth Oct 19 '15 at 16:04
0

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" />
Luiz Rossi
  • 772
  • 5
  • 19