How to use bootstrap datepicker - jquery plugin in AngularJS

Question

I want to use this plugin in AngularJS in my export table with filters. is it possible to use it with ng-model and all other uses

the plugin : https://uxsolutions.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

especially I need the "range" -from/to . option

If you want to use bootstrap in combination with angularjs, I advise you to use UI-Bootstrap. These are AngularJS directives for bootstrap. It also has the bootstrap datepicker. angular-ui.github.io/bootstrap/#!#datepicker — Mitta
– Mitta, Commented Aug 20, 2017 at 9:45
Possible duplicate of Best way to combine AngularJS and Twitter Bootstrap. — georgeawg
– georgeawg, Commented Aug 20, 2017 at 11:13
UI-bootstarp date picker is not good enough case there is no option to do "range" option like in jquery — fstdv
– fstdv, Commented Aug 20, 2017 at 14:26

georgeawg · Accepted Answer · 2017-08-20 12:45:35Z

2

To use uxsolutions bootstrap-datepicker in AngularJS, create a custom directive like this:

app.directive("datepicker", function() {
    return {
      restrict: "A",
      require: "ngModel",
      link: function(scope, elem, attrs, ngModelCtrl) {
          elem.on("changeDate", updateModel);
          elem.datepicker({});

          function updateModel(event) {
              ngModelCtrl.$setViewValue(event.date);
          }
      }
    }
})

Usage:

<div datepicker id="myDatePicker" ng-model="myDate"></div>
<div> {{myDate | date }} </div>

The DEMO

angular.module("app",[])
.directive("datepicker", function() {
    return {
      restrict: "A",
          require: "ngModel",
          link: function(scope, elem, attrs, ngModelCtrl) {
            elem.on("changeDate", updateModel);
            function updateModel(event) {
              ngModelCtrl.$setViewValue(event.date);
            }
            elem.datepicker({});
          }
    };
})

<script src="//unpkg.com/jquery"></script>
    <script src="//unpkg.com/bootstrap-datepicker"></script>
    <script src="//unpkg.com/angular/angular.js"></script>
    <link href="//unpkg.com/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.css" rel="stylesheet">
  <body ng-app="app">
    <div>Selected date: {{myDate | date}}</div>
    <div datepicker ng-model="myDate"></div>
  </body>

edited Aug 20, 2017 at 12:45

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Aug 20, 2017 at 9:38

Ajit Soman

4,0693 gold badges26 silver badges43 bronze badges

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

2 Comments

fstdv Over a year ago

Can I use the ng-model also in the controller ? why do I need ngModel

Ajit Soman Over a year ago

ng-model is used for two way data binding. To get the ng-model value in controller we use $scope . For example if you want to get value myDate from above example you will use $scope.myDate in controller.

Collectives™ on Stack Overflow

How to use bootstrap datepicker - jquery plugin in AngularJS

1 Answer 1

The DEMO

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related