javascript - AngularJS - UI Bootstrap Datepicker

Question

Am new to AngularJS. I want to implement datepicker in my project. Am using angular.min.js version AngularJS v1.5.0-rc.1 ui-bootstrap-tpls-0.12.0.js version 0.12.0. Am getting confused with lot of examples online. How to implement datepicker in angularjs. I used the below code in my application.

app.directive('datepicker', function() {
return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {
        $(function(){
            element.datepicker({
                dateFormat:'dd/mm/yy',
                onSelect:function (date) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(date);
                    });
                }
            });
        });
    }
}
});

and in my HTML page I used like this.

<input type="text" ng-model="endDate" datepicker>

below is the output am getting

How can I fix this? am clueless. Kindly pls help me get through this.

Thanks in advance.

Answer 1

Here is the documentation for ui-bootstrap.

Here is their plunkr demonstrating multiple uses of datepicker, including both inline datepicker and the popup version.

HTML for inline datepicker should look something like this

  <div style="display:inline-block; min-height:290px;">
      <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker>
    </div>

Make sure you are correctly loading/referencing ui-bootstrap and angular in your project.