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

Greg  picture Greg · Oct 4, 2014 · Viewed 22.8k times · Source

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

enter image description here

After Selecting a date in the picker

enter image description here

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

Answer

Premchandra Singh picture Premchandra Singh · Mar 31, 2015

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.