Как использовать фильтр даты в ng-модели?

Кажется, это должно быть просто, но это ускользнуло от меня. Я хотел бы преобразовать свою строку даты в объект даты и фильтровать, как она отображается.

У меня есть простой angular приложение и контроллер

myApp.controller('myAppCtrl', function($scope) {
   $scope.MyDate = Date("2014-09-23T15:26:49.1513672Z");
})

У меня есть JSON, возвращаемый с сервера, и дата, с которой я работаю, - это строка в вышеуказанном формате

из документации angular о фильтрах даты

  <span>{{1288323623006 | date:'medium'}}</span><br>

это работает, а выход: 28 октября 2010 г. 8:40:23 PM

Когда я пытаюсь использовать фильтр в $scope.MyDate следующим образом:

  {{MyDate | date:'medium'}}

дата не отформатирована, но выглядит так: Ср Сен 24 2014 07:40:02 GMT-0700 (Тихоокеанское летнее время)

В конечном итоге я хотел бы привязать текстовое поле ввода к этому значению и отфильтровать его следующим образом:

<input type="text" class="form-control" ng-model="MyDatee | date:'medium'"/>

Я надеюсь, что когда я получу простую версию, я смогу решить свою актуальную проблему с помощью ввода текста.

Вот plunker с указанным выше кодом

Ответы

Ответ 1

Для первой части используйте new Date() вместо:

$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

Во-вторых, вы можете создать директиву для форматирования модели в input (изменен из здесь)

Разметка похожа:

<input type="text" class="form-control" ng-model="MyDate" formatted-date format="medium" />

И директива подобна:

angular.module('myApp').directive('formattedDate', function(dateFilter) {
  return {
    require: 'ngModel',
    scope: {
      format: "="
    },
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return dateFilter(data, scope.format); //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return dateFilter(data, scope.format); //converted
      });
    }
  }
});

См. обновленный plunkr

Ответ 2

в вашем $scope.MyDate, замените его

$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

Ответ 4

Я только что показываю новую дату, вы можете использовать фильтр в значении.

Ответ 5

Вы можете изменить формат даты, подобный этому

<input type="text" class="form-control" value="{{MyDatee | date:'medium'}}"/>