Binding between input[date] and Moment.js in AngularJS
Solution 1
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'
}
});
Solution 2
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.
Solution 3
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>
alekseevi15
Updated on July 25, 2022Comments
-
alekseevi15 almost 2 years
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.