bootstrap-ui-datetime-picker not showing in input field preselected date

Question

in my app I use bootstrap-ui-datetime-picker. I have two cases, first is when I first time came and make new date seletion. In the date input field and in the calendar I have selected today date, and this is correct and ok.

In the second case, when I get from my API date data, the input field is empty but in the calendar, I see the correct selected date.

Problem is, I need to get a selected date in the input field and also in the calendar popup like in the first case.

Here is my code...

<input type="text" ng-disabled="true" readonly="true" class="form-control" datetime-picker="MMM d, y" ng-model="ctrl.picker4.date"
                                            is-open="ctrl.picker4.open" enable-time="false" button-bar="ctrl.buttonBar" datepicker-options="ctrl.picker4.datepickerOptions"
                                        />

And this is format how I get a date from API and set them to ng-model. From API I get a format like this (string)

 data.from:"2018-09-24"

With momentjs I format date and set to ng-model

$scope.ctrl.picker4.date = moment(data.from).format("YYYY-MM-DD");

Answer 1

Problem was with date format. I fix this with filter

.directive('dateFormatter', [
 function () {
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function postLink(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(data) {
          return moment(data).format('YYYY-MM-DD');
        });

        ngModel.$formatters.push(function(data) {
          return moment(data, 'YYYY-MM-DD').toDate()
        });
      }
  };

} ]);