Angular Datepicker MinDate function prevents selection of dates "behind" by one

Question

Angular Datepicker MinDate function prevents selection of dates "behind" by one

I've encountered an issue with the Angular Bootstrap Datepicker where I'm setting the min-date attribute as follows:

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

In my controller, minDate is defined as: (as shown in console)

vm.minDate = '2016-02-19'

However, despite setting this date, the calendar is still showing February 18 as available:

https://i.sstatic.net/NRlTQ.png<br

What could be causing this discrepancy?

javascript angularjs datepicker angular-ui-bootstrap

Answer 1

Answer №1

The datepicker implemented in this code utilizes the browser's timezone for dates. A request has been made for UTC support or a way to specify a particular timezone, or alternatively, to have date processing ignore timezones altogether.

Until a solution is found, one can address this by using a UTC date format:

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

In a related discussion on GitHub here, alternative methods are suggested, such as this option which involves creating a directive that adjusts the date with the timezone offset:

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

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

    date.setMinutes(date.getTimezoneOffset());  // aligns the "local" date with the intended UTC date

    return date;  // while unorthodox, this approach effectively applies a Date object to the $viewValue
});

Note: A Plunker demonstration is available for testing purposes. The following code snippet was employed:

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

Answer 2

The datepicker implemented in this code utilizes the browser's timezone for dates. A request has been made for UTC support or a way to specify a particular timezone, or alternatively, to have date processing ignore timezones altogether.

Until a solution is found, one can address this by using a UTC date format:

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

In a related discussion on GitHub here, alternative methods are suggested, such as this option which involves creating a directive that adjusts the date with the timezone offset:

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

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

    date.setMinutes(date.getTimezoneOffset());  // aligns the "local" date with the intended UTC date

    return date;  // while unorthodox, this approach effectively applies a Date object to the $viewValue
});

Note: A Plunker demonstration is available for testing purposes. The following code snippet was employed:

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

Angular Datepicker MinDate function prevents selection of dates "behind" by one

Answer №1

Similar questions

Sending an error from one asynchronous function to another

What is the best way to verify if a text input has a valid email format in ReactJS?

Is there a way to retrieve data from three different Bookshelf.js models in a single query?

Set a delay for an AJAX request using jQuery

The JS script is activated only when the window is resized

Troubleshooting lack of output in Console.log (NodeJs)

How to Conceal the <th> Tag with JavaScript

Unable to modify preset choices in radio checkboxes

Obtaining the latest state within the existing handler

Utilize Vuex store in Vue without the need for import statements within components

The issue with mediaDevices.getUserMedia not functioning properly in Safari 11 on iOS 11 persists, as the video output appears as a

Looking for guidance on restructuring a JSON object?

Interactive back button for seamless navigation back to the originating modal

Modify the background color of a specific bar across multiple charts when hovering or clicking - utilizing chart.js

Display HTML content using JavaScript only when a checkbox is selected

Nested ng-repeat containing single select checkboxes

An error has occurred in the Node.js module export due to an unexpected token

What is the best way to access external value in an Angular directive?

Unable to write to file due to permission restrictions from EPERM. Will delete existing file and create a new one. This action

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute