Преобразование daterangepicker в угловую директиву

Question

Я пытаюсь обернуть плагин daterangepicker в угловую директиву. Хотя мне удалось заставить его работать, предупредив выбранные даты в функции обратного вызова, я не могу либо сохранить выбранные даты в области $, либо обновить ng-модель. Я добавил комментарий «// CALLBACK of daterangepicker», чтобы любой, кто видит это, мог легко найти его в коде ниже. Я надеюсь, что кто-то с большим опытом может пролить свет на то, как это можно достичь.

HTML (вызов директивы):

<input id="date-range-picker" class="form-control" type="text" 

нг-модель = "Дата" время-рекордер дата-диапазона выбора />

Угловая директива:

module.directive('timeRecorderDateRangePicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      element.daterangepicker({ 
       startDate: moment.utc().subtract(7, 'days'), 
       endDate: moment.utc(), 
       minDate: '01/01/2014', 
       maxDate: moment.utc(), 
       dateLimit: { 
        days: 365 
       }, 
       showDropdowns: false, 
       showWeekNumbers: true, 
       timePicker: false, 
       ranges: { 
        'Today': [moment.utc(), moment.utc()], 
        'Yesterday': [moment.utc().subtract(1, 'days'), moment.utc().subtract(1, 'days')], 
        'Last 7 Days': [moment.utc().subtract(6, 'days'), moment.utc()], 
        'Last 30 Days': [moment.utc().subtract(29, 'days'), moment.utc()], 
        'This Month': [moment.utc().startOf('month'), moment.utc().endOf('month')], 
        'Last Month': [moment.utc().subtract(1, 'month').startOf('month'), moment.utc().subtract(1, 'month').endOf('month')] 
       }, 
       opens: 'right', 
       format: 'MMMM D, YYYY', 
       separator: ' to ', 
       buttonClasses: ['btn btn-default'], 
       locale: { 
        applyLabel: 'Apply', 
        cancelLabel: 'Cancel', 
        fromLabel: 'From', 
        toLabel: 'To', 
        customRangeLabel: 'Custom', 
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
        firstDay: 1 
       } 
      }, function(start, end, label) { 
       // CALLBACK of daterangepicker 
       alert('Callback!!!'); 
      }).prev().on('click', function() { // makes calendar icon click work 
       $(this).next().focus(); 
      }); 
     } 
    }; 
}); 

Answer 1

Вы можете использовать dangrossman's bootstrap-daterangepicker в проекте Angularjs, используя jqlite, попробуйте

В HTML

<input type="text" id="daterange" /> 

Затем присоедините подборщик к элементу вы хотите, чтобы вызвать его с помощью jqlite

angular.element('#daterange').daterangepicker({ 
     timePicker: true, 
     timePickerIncrement: 30, 
     locale: { 
      format: 'MM/DD/YYYY h:mm A' 
     } 
    }); 

вы также можете использовать событие

angular.element('#daterange').on('apply.daterangepicker', function(ev, picker) { 
     //do something, like calling a function 
     $scope.doSomething(picker.startDate, picker.endDate); 
    }); 

Answer 2

Вы можете преобразовать datepicker в директиву и включить обновление модели следующим образом:

angular.module('DatePicker', []) 
.directive('datepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
     element.datepicker({ 
      format: 'dd/mm/yy', 
      onSelect: function(date) { 
      ngModelCtrl.$setViewValue(date), 
       scope.$apply(); 
      } 
     }); 
     } 
    } 
    });