CODEWITHSUNDEEP
angularjscalendarangular-ui-bootstrap
Dhana Lakshmi
Dhana Lakshmi

Reputation: 413

Bootstrap Angular Datepicker is not working

I am using the code sample from https://angular-ui.github.io/bootstrap/#/datepicker when I tried to integrate it to the app there is no error in the developers console. 

$scope.open = function($event) {
   $scope.status.opened = true;
};

html:

<p class="input-group">
    <input type="text" class="form-control" 
           uib-datepicker-popup="{{format}}" 
           ng-model="PublishedDate" 
           is-open="status.opened" 
           show-weeks="true" 
           class="well well-sm" 
           custom-class="getDayClass(date, mode)" 
           close-text="Close" /> 
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" 
                ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

This method is executed in the controller and set the $scope.status.opened = true; but calendar is not displayed. Can someone please say where I am doing wrong?

Upvotes: 1

Views: 8734

Answers (2)

George Albertyn
George Albertyn

Reputation: 277

Basically the same answer as sjokkogutten above.

The ng-model for the uib-datepicker-popup needs to be set or initialized to aJavaScript Date object.

A string will not work :( make sure your controller looks like this

$scope.PublishedDate = new Date();

All you need to know on how to initialize to a specific value https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date

Also check out this answer for more help. How to usemultiple Angular UI Bootstrap Datepicker in single form?

Upvotes: 0

sjokkogutten
sjokkogutten

Reputation: 2095

js:

$scope.dt = new Date(); // will return a new date object with the current date and time

html:

<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>

Also remebember to initialize it in you your angular module:

angular.module('theNameOfYourAngularFormsApp', ['ui.bootstrap']);

Upvotes: 2

Related Questions