CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapdatepickerangular-ui
you-rick
you-rick

Reputation: 185

Angular UI Bootstrap Datepicker - show specific date on Calendar open

I am using Angular UI Bootstrap dirrective for Datepicker. I have list of dates, that I set in calendar as active (i.e. other dates are disabled).

Here is my date list - ["10/16/2015", "11/20/2015", "12/18/2015"]

UI Datepicker always open current date/month. How can I make, so calendar would open on specific date, even if this date is from previous year?

I found option defaultViewDate option, but it seems that it doesn't work (at least I didn't find this method in tpl library)

Any ideas how I can make that?

Thanks!

Upvotes: 0

Views: 3901

Answers (1)

Dan Balaban
Dan Balaban

Reputation: 725

Given Angular UI's documentation on its datepicker, the calendar adapts to a date set on the ng-model, so all you'd have to do is create a date:

new Date(year, month, day, hours, minutes, seconds, milliseconds);

See w3schools for more on that.

Set the model to that and you should be good to go. Let us know if it works.

EDIT:

To set the initial date when no date is specified, use init-date by creating a default date on the scope of the parent controller.

angular.module("yourModule").controller("parentCtrl", function($scope) {
    $scope.initialDate = new Date(2000, 5, 4);
}

And the HTML:

<div ng-controller="parentCtrl">
    <datepicker init-date="initialDate"></datepicker>
</div>

Hope it helps.

Upvotes: 2

Related Questions