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.

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.

• javascript
• angularjs
• momentjs

• @DavidThomas, thanks for advice, I updated question to sound less subjectively. – alekseevi15 Commented Nov 25, 2014 at 13:47

5 Answers 5

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'
    }
});

You can create filter, like this:

myApp.filter('moment', function() {
    return function(input) {
        return moment(input);
    };
});

Optionally you can pass arguments into filter and make it call various moment functions. Take a look into angular filters , im sure you'll think of something that suits your needs.

None of the proposed solutions worked for me. I've been in the same problem and solved with:

...
<input type="date" ng-model="selectedMoment" />
...
<script>
 angular.module('dateInputExample', [])
     .controller('DateController', ['$scope', function($scope) {
       $scope.selectedMoment = moment().toDate();
       //...more code...
       var momentDate = moment($scope.selectedMoment);
       //...more code...
     }]);
</script>

<input type="date" /> 

requires string with specific format, or (probably) JavacSript Date() object. http://www.w3schools.com/html/html_form_input_types.asp

So you can't really use momentjs object like that.

If you want to have string as a result, just use input with type="date". If you want to have momentjs plus like formatting and other things, you'll have to create your own directive or filter.

when submit it pull the original format change it to new format.

html

<input type="date" ng-model="input.NewEventDate" >  <button type="button" class="btn btn-success" ng-click="add()">submit</button>

javascript

$scope.add = function(){
$scope.input.NewEventDate = moment($scope.input.NewEventDate).format("DD-MM-YYYY");
}