CODEWITHSUNDEEP
javascriptangularjsmomentjs
alekseevi15
alekseevi15

Reputation: 1782

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

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.

Upvotes: 9

Views: 11010

Answers (5)

Zachary Lordford
Zachary Lordford

Reputation: 146

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

Upvotes: 0

Wouter Seyen
Wouter Seyen

Reputation: 76

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

Upvotes: 4

David
David

Reputation: 2761

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>

Upvotes: 3

Rasalom
Rasalom

Reputation: 3111

<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.

Upvotes: 0

Goran Lepur
Goran Lepur

Reputation: 594

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.

Upvotes: 3

Related Questions