AngularUI - UI Bootstrap Datepicker date on view and in the value are different

Question

I have a problem with Uib Datepicker . I have to dynamically change date format. for example:

  <input type="text" class="form-control" ng-model="field.value" ng-value="field.value" name="{{field.name}}" uib-datepicker-popup="dateFormat" // I could be yy-MM and other is-open="openedStart" datepicker-options="dateOptions" show-button-bar="false" show-weeks="false" ng-click="openedStart = !openedStart" /> 

In the calendar view it's shown good, as I want, for example "16-05" as it was inserted "yy-MM" , but to the backend goes value: "2016-05-02T21:00:00.000Z" which is stores in the ng-value .

How to fix it and send to the backend the same value as in the view?

Answer 1

The datepicker directive requires the ng-model value to be a JavaScript date object (like the Angular input - date directive). If you need to send the date as "yy-MM" to a service, you can format it using the Angular date filter . The date filter will also work if your displaying the ng-model value to another part of your view.