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.

Is there a reason you are trying to use this directive, instead of just using the datepicker provided by ui-bootstrap? — Alex Chance
– Alex Chance, Commented Mar 29, 2016 at 14:25

Alex Chance · Accepted Answer · 2016-03-29 14:28:18Z

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.

answered Mar 29, 2016 at 14:28

Alex Chance

7935 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaushi Over a year ago

problem is with the ordering of the bootstrap and angular.min.js files. First jQuery, second jQuery-ui and third angular.min.js. By doing this, it started working.

Carlos Toledo Over a year ago

The plnkr link is broken.

Alex Chance Over a year ago

If you click the documentation link, then scroll down to the Datepicker section, you can find their plunkr links there as well.

Collectives™ on Stack Overflow

javascript - AngularJS - UI Bootstrap Datepicker

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related