将 daterangepicker 转换为 angular 指令

Question

我正在尝试将 daterangepicker 插件包装到 angular 指令中。虽然我设法通过在回调函数中提醒所选日期使其工作，但我似乎无法将所选日期保存到 $scope 或更新 ng-model。我添加了注释“// CALLBACK of daterangepicker”，这样任何看到它的人都可以在下面的代码中轻松找到它。我希望有更多经验的人可以阐明如何实现这一目标。

HTML（调用指令）：

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

ng-model="date" time-recorder-date-range-picker />

Angular 指令：

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

您可以在使用 jqlite 的 Angularjs 项目中使用 dangrossman's bootstrap-daterangepicker，试试这个

在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

您可以将日期选择器转换为指令并启用模型更新，如下所示：

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();
          }
        });
      }
    }
  });

将 daterangepicker 转换为 angular 指令

Converting daterangepicker to angular directive

javascript

jquery

daterangepicker

angularjs

angularjs-directive