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 Singh– Rahul Singh2017-08-20 07:51:40 +00:00Commented Aug 20, 2017 at 7:51
-
use ui-bootstrap datepicker, if you are using angularJSgaurav bhavsar– gaurav bhavsar2017-08-20 08:05:19 +00:00Commented Aug 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/#!#datepickerMitta– Mitta2017-08-20 09:45:44 +00:00Commented Aug 20, 2017 at 9:45
-
Possible duplicate of Best way to combine AngularJS and Twitter Bootstrap.georgeawg– georgeawg2017-08-20 11:13:30 +00:00Commented 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 jqueryfstdv– fstdv2017-08-20 14:26:20 +00:00Commented Aug 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>
answered Aug 20, 2017 at 9:38
2 Comments
fstdv
Can I use the ng-model also in the controller ? why do I need ngModel
Ajit Soman
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.