Как использовать загрузчик datepicker - плагин jquery в AngularJS

Я хочу использовать этот плагин в AngularJS в моей таблице экспорта с фильтрами. можно ли использовать его с ng-моделью и другими

плагин: 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

особенно мне нужен "диапазон" от / до. вариант

Источник

1 ответ

Чтобы использовать https://github.com/uxsolutions/bootstrap-datepicker в AngularJS, создайте пользовательскую директиву, подобную этой:

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);
          }
      }
    }
})

Использование:

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

ДЕМО 

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>

Источник
Другие вопросы по тегам