AngularJS UI Bootstrap Datepicker Date Format in Controller is not correct

StackOverflow https://stackoverflow.com/questions/22660191

Question

I am using a datepicker in my html page as follows:

HTML

  <div ng-controller="StartDateCtrl">
    <label class="control-label" for="startDate">  Date:</label>   
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text"  name="startDate" class="form-control" show-button-bar="true" datepicker-popup="yyyy-MM-dd" ng-model="startDate" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    </div>

DATE PICKER CONTROLLER

var StartDateCtrl= function ($scope) {
  $scope.today = function() {
    $scope.travelStartDate = new Date();
  };
  $scope.today();

  $scope.showWeeks = true;
  $scope.toggleWeeks = function () {
    $scope.showWeeks = ! $scope.showWeeks;
  };

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

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.toggleMin();

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

    $scope.opened = true;
  };

  $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
  };

  //$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
  $scope.formats = ['yyyy-MM-dd'];
  $scope.format = $scope.formats[0];
};

MAIN CONTROLLER

app.controller('UpdateShoppingBasketCtrl', ['$scope', 'ShoppingBasketFactory', '$location',
                                  function ($scope, ShoppingBasketFactory, $location) {


        alert('START DATE = '+ $scope.startDate );
}]);

When the web page is submited, I am retriving the date in the main form controller but the format is different from what is displayed in my date picker popup. The format shown after selection is for instance '26/03/2014'. But, in my controller I get : Thu Mar 26 2014 00:00:00 GMT 0000 (GMT Standard Time)

Please, How do I get the displayed date format in the controller and NOT the "Thu Mar 26 2014 00:00:00 GMT 0000 (GMT Standard Time)"????

Was it helpful?

Solution

You can use date filter for formatting the dates. Here is the demo:

<body ng-app="MyApp" ng-controller="MyController">
   <div>{{date}}</div>
</body>

script:

angular.module('MyApp',[])
       .controller('MyController',function($scope,$filter){
    $scope.date = $filter('date')(Date.now(),'yyyy-MM-dd'); 
});

OTHER TIPS

You need to just simply get the model value in angular filter method and give the date formatting you want. One more thing its need to define $filter in your controller as well.

var dateValue =$filter('date')($scope.date, 'MM/dd/yyyy'),

While this question was answered already, I'll provide an alternative, along with some more detail.

The issue is actually a bug occurring in Angular 1.3.0 rc0 and onwards. Another solution, besides using $filter, is to define a custom directive as DaveWM describes:

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

That should have the same effect as using $filter.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top