Проблемы с получением Bootstrap DateRangePicker для работы в filterHeaderTemplate с модальным всплывающим окном в UI-Grid

Я пытаюсь добавить загрузочный DateRangePicker в шаблон заголовка фильтра для Angular UI-Grid. Я вижу, что шаблон работает правильно, потому что он показывает значок Bootstrap. Я не хочу использовать собственный угловой тип: «дата». Я хочу использовать средство выбора даты начальной загрузки. У меня есть Plunker в качестве примера ниже, который показывает работу собственного средства выбора даты и кнопку Bootstrap Datepicker, нажимаемую, но ничего не отображающую.

У меня есть все необходимые для этого включения.

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.2.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />

Это мой шаблон HTML

<!-- DatePickerTemplate HTML -->
<script type="text/ng-template" id="DatePickerTemplate.html">
  <div ng-controller="DatePickerController">
    <div>Sent On</div>
      <div class="input-group date" datepicker-popup is-open="true"
       ng-model="COL_FIELD"  min-date="2010-01-01">
       <input class="form-control">
       <div class="input-group-addon">
       <span class="glyphicon glyphicon-th"></span>
      </div>
    </div>
  </div>
</script>

Это моя колонка UI GridDefinitons:

{ name: 'Sent On', field: 'SentDateTime', enableCellEdit: false,
  allowCellFocus: false, type: 'date', cellFilter: 'date:"M-d-yy H:mm"',
  filterHeaderTemplate: 'DatePickerTemplate.html' }

Это моя директива

app.directive("filterDatePicker", function(){
    return {
        restrict: 'AE',
        scope: {
        getData: '=' // I'm trying to get  $scope.gridOptions here not working
    },
        templateUrl: 'DatePickerTemplate.html'
    };
});

Когда я нажимаю на кнопку начальной загрузки, он ничего не делает. Я тоже не получаю никаких ошибок в консоли.

Вот плункер, вы можете видеть оба заголовка фильтра даты, один слева является родным, а другой справа - загрузчиком, который не работает.

Может кто-нибудь, пожалуйста, дайте мне представление о том, где я ошибаюсь. Я не могу открыть BootStrap DateRangePicker. Я действительно хочу добавить DateRangePicker, а не просто обычный Bootstrap Date Picker.

Плункер фильтра даты


angularjs twitter-bootstrap-3 daterangepicker angularjs-directive angular-ui-grid
person JEuvin    schedule 25.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это пример использования daterangepicker в filterHeaderTemplate, но без использования углового шаблона. Во-первых, прочитайте это:

https://github.com/fragaria/angular-daterangepicker

затем в столбце ui-grid для filterHeaderTemplate используйте что-то вроде:

  {
                            name: 'CreatedDate',
                            displayName: 'Created Date',
                            filterHeaderTemplate: "<div >" +
                                                  "<form  ng-submit='grid.appScope.yourDateFiltering()'>" +
                                    " <input date-range-picker  class='form-control date-picker'  type='text' ng-model='grid.appScope.vm.datePicker.date' >" +
                                    "<button type='submit'  class='btn ' >Filter</button>" +
                                    "</form> </div>",
}
person Amir978    schedule 11.03.2016