How to format a date using ng-model?

by

Use custom validation of forms http://docs.angularjs.org/guide/forms Demo: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Directive using formaters and parsers and MomentJS )

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

More Related Contents:

  1. File Upload using AngularJS
  2. AngularJS Multiple ng-app within a page
  3. Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
  4. How to use a keypress event in AngularJS?
  5. Enforcing unique usernames with Firebase simplelogin
  6. How to Loop through items returned by a function with ng-repeat?
  7. What’s the difference between ng-model and ng-bind
  8. Angular js init ng-model from default values
  9. Easiest way to pass an AngularJS scope variable from directive to controller?
  10. How not to change url when show 404 error page with ui-router
  11. How to generate url encoded anchor links with AngularJS?
  12. angular-ui-router with requirejs, lazy loading of controller
  13. How to pass data between sibling components without using $scope?
  14. Update scope value when service data is changed
  15. Enable angular-ui tooltip on custom events
  16. AngularJS: Upload files using $resource (solution)
  17. AngularJS – How can I do a redirect with a full page load?
  18. How to simulate a drag and drop action in protractor?
  19. How do I store a current user context in AngularJS?
  20. Modules and namespace / name collision in AngularJS
  21. What is the Angular ui-router lifecycle? (for debugging silent errors)
  22. How do I create an AngularJS UI bootstrap popover with HTML content?
  23. How to getText on an input in protractor
  24. How do I handle right-click events in angular.js?
  25. AngularJS – wait for multiple resource queries to complete
  26. AngularJS $watch vs $watchCollection: which is better for performance?
  27. Set URL query parameters without state change using Angular ui-router
  28. How to highlight a selected row in ngRepeat?
  29. AngularJS – Injecting factory from another module into a provider
  30. How does AngularJS $watch these cases in an ng-repeat?

Leave a Comment