【问题标题】：How to use bootstrap datepicker - jquery plugin in AngularJS如何使用引导日期选择器 - AngularJS 中的 jquery 插件
【发布时间】：2018-01-28 12:06:19
【问题描述】：

我想在带有过滤器的导出表中使用 AngularJS 中的这个插件。是否可以将它与 ng-model 和所有其他用途一起使用

插件： 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

尤其是我需要“范围” -from/to 。选项

【问题讨论】：

是角还是角js？
如果您使用的是 angularJS，请使用 ui-bootstrap datepicker
如果你想结合 angularjs 使用 bootstrap，我建议你使用 UI-Bootstrap。这些是用于引导的 AngularJS 指令。它也有引导日期选择器。 angular-ui.github.io/bootstrap/#!#datepicker
Best way to combine AngularJS and Twitter Bootstrap 可能重复。
UI-bootstarp 日期选择器不够好情况下没有像 jquery 那样执行“范围”选项的选项

标签： angularjs twitter-bootstrap angularjs-directive bootstrap-datepicker angularjs-ng-model

【解决方案1】：

要在 AngularJS 中使用 uxsolutions bootstrap-datepicker，请像这样创建一个 custom directive：

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>

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>

【讨论】：

我可以在控制器中使用 ng-model 吗？为什么我需要 ngModel
ng-model 用于双向数据绑定。要在控制器中获取 ng-model 值，我们使用 $scope 。例如，如果您想从上面的示例中获取值 myDate，您将在控制器中使用 $scope.myDate。