I am using the Angular UI bootstrap date picker popup using this custom directive on Plunker ():

//Module
var userModule = angular.module("userModule",['ui.bootstrap']);

//Controller
userModule.controller("sampleController", ['$scope', function ($scope) {
    $scope.minDate = new Date();
}]);

//Directive code
userModule.directive('datePicker', [function (dateFilter) {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            ngReadonly: '=?',
            minDate: '=?',
            maxDate: '=?',
            dtpRequired: '=?',
            dateOptions: '=?'
        },
        template: '<p class="input-group">' +
                    '<input type="text" style="cursor:pointer" class="form-control" datepicker-popup="{{format}}"' +
                        'ng-model="ngModel" is-open="opened"' +
                            'min-date="minDate" max-date="maxDate"' +
                                'datepicker-options="dateOptions" date-disabled="disabled(date, mode)"' +
                                 'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                         '<span class="input-group-btn">' +
                            '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                                '<i class="fa fa-calendar"></i></button>' +
                        '</span>' +
                    '</p>',
        controller: function ($scope) {
            // check if it was defined.  If not - set a default
            $scope.dateOptions = $scope.dateOptions || {
                formatYear: 'yy',
                startingDay: 1,
                showWeeks: false
            };

            $scope.openPopup = function ($event) {
                if ($event !== undefined) {
                    $event.stopPropagation();
                }
                $scope.opened = true;
            };

            $scope.format = 'dd MMMM yyyy';
        },
        link: function ($scope, element, attrs, controller) {
            //remove the default formatter from the input directive to prevent conflict
            controller.$formatters.shift();
        }
    };
}]);

This is working fine and the date is formatted fine when selecting a date from the calendar popup. However if I set a date of the ng-model in the controller, the date isn't formatted as 'dd MMMM yyyy' and is returned as a date string like Sat Oct 01 2016 01:00:00 GMT+0100 (GMT Daylight Time). However in the Plunker, I am able to set a date in the controller and it is formatted fine. Here is my HTML for the date picker:

<date-picker ng-model="startDate.value" datepicker-options="dateOptions" min-date="minDate" ng-readonly="true"></date-picker>

In my controller startDate.value = new Date();

I'm not sure where the problem could be. The image below shows what I'm getting back.

I am using the Angular UI bootstrap date picker popup using this custom directive on Plunker (http://plnkr.co/edit/053VJYm1MpZUiKwFTfrT?p=preview):

//Module
var userModule = angular.module("userModule",['ui.bootstrap']);

//Controller
userModule.controller("sampleController", ['$scope', function ($scope) {
    $scope.minDate = new Date();
}]);

//Directive code
userModule.directive('datePicker', [function (dateFilter) {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            ngReadonly: '=?',
            minDate: '=?',
            maxDate: '=?',
            dtpRequired: '=?',
            dateOptions: '=?'
        },
        template: '<p class="input-group">' +
                    '<input type="text" style="cursor:pointer" class="form-control" datepicker-popup="{{format}}"' +
                        'ng-model="ngModel" is-open="opened"' +
                            'min-date="minDate" max-date="maxDate"' +
                                'datepicker-options="dateOptions" date-disabled="disabled(date, mode)"' +
                                 'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                         '<span class="input-group-btn">' +
                            '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                                '<i class="fa fa-calendar"></i></button>' +
                        '</span>' +
                    '</p>',
        controller: function ($scope) {
            // check if it was defined.  If not - set a default
            $scope.dateOptions = $scope.dateOptions || {
                formatYear: 'yy',
                startingDay: 1,
                showWeeks: false
            };

            $scope.openPopup = function ($event) {
                if ($event !== undefined) {
                    $event.stopPropagation();
                }
                $scope.opened = true;
            };

            $scope.format = 'dd MMMM yyyy';
        },
        link: function ($scope, element, attrs, controller) {
            //remove the default formatter from the input directive to prevent conflict
            controller.$formatters.shift();
        }
    };
}]);

This is working fine and the date is formatted fine when selecting a date from the calendar popup. However if I set a date of the ng-model in the controller, the date isn't formatted as 'dd MMMM yyyy' and is returned as a date string like Sat Oct 01 2016 01:00:00 GMT+0100 (GMT Daylight Time). However in the Plunker, I am able to set a date in the controller and it is formatted fine. Here is my HTML for the date picker:

<date-picker ng-model="startDate.value" datepicker-options="dateOptions" min-date="minDate" ng-readonly="true"></date-picker>

In my controller startDate.value = new Date();

I'm not sure where the problem could be. The image below shows what I'm getting back.

• javascript
• html
• angularjs
• angularjs-directive
• angular-ui-bootstrap

• Can't reproduce this in the Plunker as you said - in the sampleController, set $scope.dtpValue1 = new Date(); and the formatting appears correct ("01 August 2016"). Did you try the exact same code locally and have this problem? – Aurora0001 Commented Aug 1, 2016 at 9:08
• Yeah using the same code in my project is giving me this problem – NiallMitch14 Commented Aug 1, 2016 at 9:41
• That's quite bizarre. Are you using the same versions of libraries and your browser? – Aurora0001 Commented Aug 1, 2016 at 9:43
• Yep same bootstrap and angular versions and using chrome – NiallMitch14 Commented Aug 1, 2016 at 9:57
• I've tried it locally (not on Plunker) and still get the correct format. Which version of Chrome are you using? – Aurora0001 Commented Aug 1, 2016 at 10:03

4 Answers 4

I tried your code locally and it seemed to work great without any issues. I tried various ways of changing the date and again everything works. There seems to be a little difference between the example in plnkr and the example you are posting, specifically the way you are referencing the date (You are stating you are using startDate.value = new Date(); , but in plnkr I see ng-model="dtpValue1" .This makes me think that there are other things that you are missing and I suggest making a plete example in a .zip file that is testable locally. Also since there is a chance that nobody will be able to reproduce it again, it would be useful the list of all chrome extensions and operation system you have, and most importantly you should try to reproduce it on other machine and report back the results.

Generally what are expecting to work is working as expected on every machine that I have tested and I don't see a good reason why it shouldn't work.

If I was able to reproduce the issue I could put breakpoints and figure out exactly what is going on, but at the moment this is out of the question and we should focus on how to reproduce the problem.

The provided information seems insufficient to solve this issue.

It is because of bootstrap UI datepicker works with string actually and you are trying to assign a javascript date object to the variable that UI bootstrap works on angular controller. they are different type of datas so it causes the error. If you try to console the type of the variable, after select a date from datepicker pop-up. you will see it is a string. So.. If you want to set a date from your controller just you need to set it as string, not a javascript object.

Finally found a solution for this. I changed to the uib-datepicker directive from Angular-UI-Bootstrap and it now formats the date correctly when the date is set in the controller! Here's my HTML template from my directive for reference:

template: '<p class="input-group">' +
            '<input type="text" style="cursor:pointer" class="form-control" uib-datepicker-popup="{{format}}"' +
                'ng-model="ngModel" is-open="opened"' +
                    'min-date="minDate" max-date="maxDate"' +
                        'datepicker-options="dateOptions"date-disabled="disabled(date, mode)"' +
                         'ng-required="dtpRequired" close-text="Close" ng-readonly="ngReadonly" ng-click="openPopup()" />' +
                 '<span class="input-group-btn">' +
                    '<button type="button" class="btn btn-default" ng-click="openPopup($event)">' +
                        '<i class="fa fa-calendar"></i></button>' +
                '</span>' +
            '</p>'

I wrote this directive to convert string form server to valid javascript format that uib-datepicker-popup need:

app.directive('datepickerLocaleDate', ["$rootScope", "$filter", function ($rootScope, $filter) {
   return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {

         if (ngModel) {

           // convert string to valid javascript fprmat 
            setTimeout(() => {
               ngModel.$setViewValue(new Date(ngModel['$viewValue']));
            }, 3000);


            ngModel.$parsers.push(function (value) {
              return new Date(value);
            });

            ngModel.$formatters.push(function (value) {
              return value ? $filter('date')(value, 'yyyy/MM/dd') : null;
            });

         }
      }
   };
}]);