Bootstrap Angular Datepicker is not working

Question

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?

in $scope.open method, add `$event.stopPropagation()` and `$event.preventdefault()`, it might works... I have found same solution on many websites. — Rajiv Pingale, Mar 18 '16 at 12:52

sjokkogutten · Answer 1 · 2015-11-16T17:04:09.047

2

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']);

edited Nov 16 '15 at 17:04

answered Nov 16 '15 at 13:57

sjokkogutten

2,005
2
21
24

can i please know what is toDate in js – Dhana Lakshmi Nov 16 '15 at 15:04
new Date(); will return a new date object with the current date and time. You can read more about the Date object [here](http://www.w3schools.com/js/js_dates.asp – sjokkogutten Nov 16 '15 at 17:06

score 0 · Answer 2 · edited May 23 '17 at 11:59

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?

Bootstrap Angular Datepicker is not working

2 Answers2