Binding between input[date] and Moment.js in AngularJS

angularjs, javascript, momentjs

Solution

Create a directive which parses date to moment and formats moment to date.

Basic example below (to be extended with error handling)

myApp.directive('momentInput', function () {
    return {
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.push(function(viewValue) {
                return moment(viewValue);
            });
            ctrl.$formatters.push(function(modelValue) {
                return modelValue.toDate();
            });
        },
        require: 'ngModel'
    }
});

Problem

In order to formulate question I prepared the simplified example: ``` ... <input type="date" ng-model="selectedMoment" /> ... <script> angular.module('dateInputExample', []) .controller('DateController', ['$scope', function($scope) { $scope.selectedMoment = moment(); //...more code... }]); </script> ``` Basically, I just need binding between model(moment.js's date) & view(input[date] field) to work properly - date input is updated when model is updated and vice versa. Apparently, trying the example above would bring you error that model is not of the Date type. That's why I am asking experienced AngularJs developers, how can I implement this binding properly? Any advices appreciated.

Original source