Search code examples
jqueryangularjsangular-ui-bootstrapbootstrap-datepickerbootstrap-datetimepicker

AngularJS UI Bootstrap Datepicker Date Format in Controller is not correct

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)"????

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