angular-ui datepicker initial state of datepicker not formatted per datepicker-popup

Question

I'm working with an angular-ui datepicker and everything is actually working fine, with the exception of the initial state of the datepicker. AFter I pick a date, it looks fine. See below:

Initial State

After Selecting a date in the picker

So, clearly I'm getting the strigified version of the date object in the first case, and the formatted after selecting a date.

The Markup

<input type="text" class="form-control"
       id="birthday"
       datepicker-options="datePickerOptions"
       datepicker-popup="{{format}}"
       data-ng-model="birthday"
       data-is-open="opened"
       data-ng-required="true"
       data-close-text="Close"/>

<span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            data-ng-click="open($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>

The Controller

var today = $scope.today = function today() {
    $scope.birthday = $scope.client.birthday || new Date();
};
today();

$scope.clear = function clear() {
    $scope.dt = null;
};

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.format = 'MMM d, yyyy';
$scope.datePickerOptions = {
    'show-weeks': false
};

Not a huge deal, but would be really nice if the model (which needs to be a date object per the docs) was formatted per the $scope.format to begin with, rather than a strigified date object. Also, not sure it makes a difference, but this datepicker is inside a modal. Thanks for any help!

UPDATE

Looks like I'm not the only one experiencing this, and it's related to using angular 1.3. https://github.com/angular-ui/bootstrap/issues/2659

Solution 1

Where/where ever solutions I found they are lengthy, handling by directive etc. So I prefer this short one

birthday = $filter('date')(new Date(), "MMM dd, yyyy");

Note: Dont forget to inject angular built in $filter service into the controller

angular.module('app').controller("yourController", 
['$filter' function($filter){ 
       /* your code here */  

       birthday = $filter('date')(new Date(), "MMM dd, yyyy");

       /* your code here */ 
}]);

Hope this helps.

Solution 2

I had similar issue, looks like bootstrap UI is incompatible with AngularJS 1.3.x version

This plunkr resolves the issue for me http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit:
.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();
    }
  }
});

Also refer to Github ticket https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976

Solution 3

To improve on Premchandra Singh's answer, using the angular $filter service does work but you need to also add a watch onto your date field to apply the filter on future updates:

$scope.myDate = $filter('date')(new Date(), 'dd.MM.yy');
$scope.$watch('myDate', function (newValue, oldValue) {
    $scope.myDate = $filter('date')(newValue, 'dd.MM.yy');
});

Comments

[Fasermaler]

This does work to fix the display issue, but it'll turn your bound model var into a timestamp int rather than a Date object. That wouldn't be so bad if clicking a date in the popup didn't turn it back into a Date object again, which means that the code that uses it needs to do cumbersome type checking first.

[csharpsql]

This unfortunately turns the bound property into a string not a date, then once another date is selected it will be turned back into a date so like Andreas Ågren's solution means you have to do some type checking before submitting

[csharpsql]

To improve on this, add a watch to the date field you are using, will add a separate answer.

[Manam]

Worked perfectly fine for me!! Thanks, It is the angularjs library issue..mine is 1.3, just inject it to your directives and you should be good!