Why is the datepicker angularjs sample selected the day before?

Question

I use the angularjs bootstrap datepicker directive and when I set the date from the model, it selects the 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 the plunk with the problem.

Is there any solution?

Answer 1

This is because JS processes dates initially. The AngularUI team mentions this in the docs.

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

Answer 2

, .NET Web Api, :

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

- , JsonFormatter .

Answer 3

My solution is to use the directive to fix the problem minus 1, 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 ngModel with a new Date (), and after that the date was set correctly, even after I changed it with a date picker!