Home » Angularjs » angular-ui datepicker initial state of datepicker not formatted per datepicker-popup

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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');
});

Questions:
Answers:

Another work around that worked for me, besides the one described in the github issue, is to initialize the model with the epoch time in milliseconds rather than a date object, e.g:

$scope.dt = new Date().getTime();