Angular -ui datepicker начальное состояние datepicker, не отформатированное за всплывающее окно datepicker

Я работаю с angular -ui datepicker, и все работает нормально, за исключением начального состояния datepicker. AFTER Я выбираю дату, это выглядит хорошо. См. Ниже:

Начальное состояние

После выбора даты в подборщике

Итак, ясно, что я получаю стробированную версию объекта даты в первом случае и отформатирован после выбора даты.

Разметка

<input type="text" class="form-control"
       id="birthday"
       datepicker-options="datePickerOptions"
       datepicker-popup="{{format}}"
       data-ng-model="birthday"
       data-is-open="opened"
       data-ng-required="true"
       data-close-text="Close"/>

<span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            data-ng-click="open($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>

Контроллер

var today = $scope.today = function today() {
    $scope.birthday = $scope.client.birthday || new Date();
};
today();

$scope.clear = function clear() {
    $scope.dt = null;
};

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.format = 'MMM d, yyyy';
$scope.datePickerOptions = {
    'show-weeks': false
};

Не огромная сделка, но было бы очень приятно, если бы модель (которая должна быть объектом даты в документах) была отформатирована для $scope.format для начала, а не для объекта с сокращенной датой. Кроме того, не уверен, что это имеет значение, но этот datepicker находится внутри модального. Спасибо за любую помощь!

UPDATE

Похоже, я не единственный, кто это пережил, и это связано с использованием angular 1.3. https://github.com/angular-ui/bootstrap/issues/2659

Ответ 1

Где/где когда-либо были найдены решения, они длительны, управляются по директиве и т.д. Поэтому я предпочитаю этот короткий

birthday = $filter('date')(new Date(), "MMM dd, yyyy");

Примечание. Не забудьте ввести angular встроенную службу $filter в контроллер

angular.module('app').controller("yourController", 
['$filter' function($filter){ 
       /* your code here */  

       birthday = $filter('date')(new Date(), "MMM dd, yyyy");

       /* your code here */ 
}]);

Надеюсь, что это поможет.

Ответ 2

У меня была аналогичная проблема, похоже, что пользовательский интерфейс bootstrap несовместим с версией AngularJS 1.3.x

Этот plunkr решает проблему для меня http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit:
.directive('datepickerPopup', function (){
  return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
    }
  }
});

Также см. билет Github https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976

Ответ 3

Чтобы улучшить ответ Premchandra Singh, использование службы фильтра angular $действительно работает, но вам нужно также добавить часы в поле даты, чтобы применить фильтр к будущим обновлениям:

$scope.myDate = $filter('date')(new Date(), 'dd.MM.yy');
$scope.$watch('myDate', function (newValue, oldValue) {
    $scope.myDate = $filter('date')(newValue, 'dd.MM.yy');
});

Ответ 4

Другая работа, которая работала для меня, помимо той, которая описана в проблеме github, заключается в том, чтобы инициализировать модель с периодом времени в миллисекундах, а не с объектом даты, например:

$scope.dt = new Date().getTime();