Двусторонняя привязка даты в Angular?

Question

[Антон]

В $scope есть переменная с датой в unixstamp
$scope.date = 1499847985;
В шаблоне input
<input type="text" ng-model="date" />

Вопрос:
Что сделать для того, что бы в отображалась отформатированная дата (Например, yyyy-mm-dd)
А так же при изменении значения input (на тот же формат) что бы $scope.date принималs соответствующий timestamp ?

Answer 1

[Николай]

Это как правило делается при помощи parsers/formatters для ng-model.
Делаем директиву:

angular.module('foo').directive('dateTime', function() {
return {
   require: '^ngModel',
   link: linkFn,
};
function linkFn($element, $scope, $attrs, $ctrl) {
     // в $ctrl будет находиться ngModelController
     
     $ctrl.formatters.push(formatValue);
     $ctrl.parsers.push(parseValue);
      function formatValue(value) {
           // здесь делаем форматирование для отображения в DOM
          return formatedValue; 
      }
      function parseValue(value) {
           // здесь извлекаем из нового значения, которое пришло из DOM значение для ngModel
          return parsedValue;
      }
}
});

Для работы с датами (форматирования и парсинга) рекомендую использовать moment.js
Дока по поводу ngModelController тут: https://docs.angularjs.org/api/ng/type/ngModel.NgM...

Comments

[Антон]

Огромное спасибо! Четкий ответ без лишней инфы.
В моём случае код получитлся таким:

.directive('dateTime', function() {
        return {
            require: '^ngModel',
            link: linkFn
        };
        function linkFn($element, $scope, $attrs, $ctrl) {
            $ctrl.$formatters.push(formatValue);
            $ctrl.$parsers.push(parseValue);

            function formatValue(value) {
                return moment(value * 1000).format('DD.MM.YYYY');
            }
            function parseValue(value) {
                return moment(value,'DD-MM-YYYY').unix() * 1000;
            }
        }
    });