Angular bootstrap datepicker date format does not format ng-model value

by

Although similar answers have been posted I’d like to contribute what seemed to be the easiest and cleanest fix to me. Assuming you are using the AngularUI datepicker and your initial value for the ng-Model does not get formatted simply adding the following directive to your project will fix the issue:

angular.module('yourAppName')
.directive('datepickerPopup', function (){
    return {
        restrict: 'EAC',
        require: 'ngModel',
        link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
  }
}
});

I found this solution in the Github AngularUI issues and therefore all credit goes to the people over there.

More Related Contents:

  1. Can you override specific templates in AngularUI Bootstrap?
  2. Scope issue in AngularJS using AngularUI Bootstrap Modal
  3. angularjs share data config between controllers
  4. How do I create an AngularJS UI bootstrap popover with HTML content?
  5. How to use a keypress event in AngularJS?
  6. Injecting $scope into an angular service function()
  7. How to reload the current state?
  8. How to set a selected option of a dropdown list control using angular JS
  9. What’s the difference between ng-model and ng-bind
  10. ngModel Formatters and Parsers
  11. Otherwise on StateProvider
  12. Enable angular-ui tooltip on custom events
  13. Dynamically set the value of ui-sref Angularjs
  14. Angular-UI Router: Nested Views Not Working
  15. Invoking modal window in AngularJS Bootstrap UI using JavaScript
  16. Angular JS – Automatically focus input and show typeahead dropdown – ui.bootstrap.typeahead
  17. Using ng-repeat to generate select options (with Demo)
  18. How to tie angular-ui’s typeahead with a server via $http for server side optimization?
  19. Model in a modal window in angularjs is empty
  20. How do I increase modal width in Angular UI Bootstrap?
  21. Contenteditable with ng-model doesn’t work
  22. How to integrate AngularUI to AngularJS?
  23. How to detect browser using angularjs?
  24. angularjs ui-router – how to build master state which is global across app
  25. Cannot get textarea value in angularjs
  26. angularjs text area character counter
  27. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS
  28. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  29. Two views in one AngularUI Router state sharing scope
  30. Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?

Leave a Comment