Я пытаюсь добавить загрузочный DateRangePicker в свой шаблон заголовка для Angular UI-Grid. Я вижу, что шаблон работает правильно, потому что он показывает значок Bootstrap. Я не хочу использовать собственный угловой тип: «дата». Я хочу использовать средство выбора даты начальной загрузки.
У меня есть все необходимые для этого включения.
<!-- 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"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/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"',
headerCellTemplate: 'DatePickerTemplate.html' }
Это моя директива
app.directive("filterDatePicker", function(){
return {
restrict: 'E',
scope: true,
templateUrl: 'DatePickerTemplate.html'
};
});
На данный момент у меня есть пустой контроллер, и я хочу сделать в контроллере даты, которые я выбираю из BootStrap DateRangePicker, как только он заработает.
Контроллер
app.controller('DatePickerController', [
'$scope', function($scope) {
// return date picked from bootstrap datepicker
}
]);
Когда я нажимаю на маленькое меню, оно ничего не делает. Я также не получаю никаких ошибок в консоли разработчика.
Вот плункер, вы можете видеть оба столбца даты, один слева является родным, другой справа должен быть загрузчиком, который не работает.
Может кто-нибудь, пожалуйста, дайте мне представление о том, где я ошибаюсь. Я не могу открыть BootStrap DatePicker. Я действительно хочу добавить DateRangePicker, а не просто обычный Bootstrap Date Picker.
