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
especially I need the "range" -from/to . option
- 1Is is angular or angular js ?– Rahul SinghCommentedAug 20, 2017 at 7:51
- use ui-bootstrap datepicker, if you are using angularJS– gaurav bhavsarCommentedAug 20, 2017 at 8:05
- 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– MittaCommentedAug 20, 2017 at 9:45
- Possible duplicate of Best way to combine AngularJS and Twitter Bootstrap.– georgeawgCommentedAug 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– fstdvCommentedAug 20, 2017 at 14:26
Add a comment |
1 Answer
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>
- Can I use the ng-model also in the controller ? why do I need ngModel– fstdvCommentedAug 20, 2017 at 14:25
ng-modelis used for two way data binding. To get the ng-model value in controller we use$scope. For example if you want to get valuemyDatefrom above example you will use$scope.myDatein controller.CommentedAug 20, 2017 at 14:32
