Angular Datepicker MinDate disabling one day behind

Question

I'm using the Angular Bootstrap Datepicker and I'm setting the min-date attribute like this:

<input type="text" class="" uib-datepicker-popup="MM/dd/yyyy" 
       show-button-bar="false" ng-model="vm.date" ng-change="vm.DateChanged()" 
       min-date="vm.minDate" date-disabled="vm.disabledDates(date,mode)" />

Where minDate is set in my controller as: (as shown in console)

vm.minDate = '2016-02-19'

However, my calendar is coming up with February 18 available as well:

Why is this happenning?

Answer 1

This datepicker uses the browser timezone for dates. There is an open request to provide UTC support or to provide some way to set a specific timezone or even better, to use dates without considering timezones at all.

As we can't scape from that yet, you can solve this by using an UTC date format:

vm.minDate = '2016-02-19T00:00:00Z'

In this GitHub thread, people suggests other solutions, like this one which sets a directive to use UTC by correcting the date with the timezone offset:

ngModelCtrl.$formatters.push(function (value) {
    var date = new Date(value);

    if (isNaN(date) || (value == null)) {
        return value;  // needed for null/empty/undefined values
    }

    date.setMinutes(date.getTimezoneOffset());  // forces the "local" version of the date to match the intended UTC date

    return date;  // yes, this is a Date object being applied to the $viewValue...don't judge, it works!
});

Edit: I've created a Plunker to test this. What I've used:

var date = new Date('2016-02-19');
date.setMinutes(date.getTimezoneOffset());
$scope.minDate = date;