Why does angularjs bootstrap datepicker pick one day before?

Question

I'm using angularjs bootstrap datepicker directive and when I set a date from model it picks a day before the selected date.

<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2014-09-24'">2014-09-24</button>

Here is a plunk with the issue.

Is there any solution?

Answer 1

This is due to the way JS handles dates natively. AngularUI team mentions this in the docs.

Here's one solution: Angular-UI One day is subtracted from date in ui-date

Answer 2

For anyone needing a solution in the .NET Web Api world, this line worked well for me:

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Local;

It was due to the JsonFormatter spitting out the time in the wrong time zone.

Answer 3

my solution is to use a directive to fix the minus 1 issue, and also to format the view and model values:

app.directive('ngBootstrapFix',['$filter', function($filter) {
  return {
    require: 'ngModel',
    priority: 1,
    link: function($scope, $element, $attrs, ngModelCtrl) {
      ngModelCtrl.$parsers.push(function(viewValue) {
        viewValue = $filter('date')(viewValue, 'yyyy-MM-dd');
        return viewValue;
      });
      ngModelCtrl.$render = function() {
        var val = $filter('date')(ngModelCtrl.$viewValue, 'dd/MM/yyyy');
        $element.val(val);
      };
    }
  };
}]);

Answer 4

I just initialized the ngModel with new Date(), and the date was set correctly thereafter, even after I changed it with the date picker !