【问题标题】:How to use daterangepicker inside a ng-repeat directive in angularJS如何在 angularJS 的 ng-repeat 指令中使用 daterangepicker
【发布时间】:2015-12-16 11:00:33
【问题描述】:

我是 angularJS 新手,我不知道如何在 ng-repeat 指令中使用 daterangepicker。

请帮我解决这个问题。

提前致谢

【问题讨论】:

  • 有很多 UI 插件叫做 daterangepicker ,你用哪一个?

标签: jquery angularjs ajax angularjs-directive angularjs-ng-repeat


【解决方案1】:

我希望这个例子对你有帮助, 注意:从ngBehavior下载 ngBehavior

<!doctype html>
<html ng-app="app" ng-controller="ctrl">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
</head>

<body>

  <table class="table table-bordered">
    <tr ng-repeat="date in dates">
      <td>
        <input type="text" class="form-control" ng-model="datePicker" ng-date-picker min-date="{{date.from}}" max-date="{{date.to}}" placeholder="from {{date.from}}, to {{date.to}}" />
      </td>
    </tr>
  </table>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.min.js"></script>
  <!--download from https://github.com/maherAshori/ngBehavior -->
  <script src="/Scripts/ngBehavior/ngBehavior.js"></script>

  <script>
    angular.module("app", ["ngBehavior"]);
    angular.module("app").controller("ctrl", function($scope) {
      $scope.dates = [{
        from: "2015/12/16",
        to: "2015/12/20"
      }, {
        from: "2016/01/01",
        to: "2016/01/15"
      }, {
        from: "2016/05/10",
        to: "2016/06/25"
      }];
    });
  </script>
</body>

</html>

【讨论】:

  • 谢谢,但我需要弹出日期范围选择器模型对话框,并且用户应该能够从该弹出窗口中选择开始日期和结束日期。提前致谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多