javascript - AngularJS 的日期范围选择器指令

Question

我在使用日期范围选择器指令以及自定义和范围时遇到问题，我已将原始https://github.com/luisfarzati/ng-bs-daterangepicker指令修改为：

(function (angular) {
'use strict';

angular.module('ngBootstrap', []).directive('input', function ($compile, $parse) {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function ($scope, $element, $attributes, ngModel) {
            if ($attributes.type !== 'daterange') return;

            var options = {};
            options.format = $attributes.format || 'YYYY-MM-DD';
            options.separator = $attributes.separator || ' - ';
            options.minDate = $attributes.minDate && moment($attributes.minDate);
            options.maxDate = $attributes.maxDate && moment($attributes.maxDate);
            options.dateLimit = $attributes.limit && moment.duration.apply(this, $attributes.limit.split(' ').map(function (elem, index) { return index === 0 && parseInt(elem, 10) || elem; }) );
            options.ranges = $attributes.ranges && $parse($attributes.ranges)($scope);

            function format(date) {
                return date.format(options.format);
            }

            function formatted(dates) {
                return [format(dates.startDate), format(dates.endDate)].join(options.separator);
            }

            ngModel.$formatters.unshift(function (modelValue) {
                if (!modelValue) return '';
                return modelValue;
            });

            ngModel.$parsers.unshift(function (viewValue) {
                return viewValue;
            });

            ngModel.$render = function () {
                if (!ngModel.$viewValue || !ngModel.$viewValue.startDate) return;
                $element.val(formatted(ngModel.$viewValue));
            };

            $scope.$watch($attributes.ngModel, function (modelValue) {
                if (!modelValue || (!modelValue.startDate)) {
                    ngModel.$setViewValue({ startDate: moment().startOf('day'), endDate: moment().startOf('day') });
                    return;
                }
                $element.data('daterangepicker').startDate = modelValue.startDate;
                $element.data('daterangepicker').endDate = modelValue.endDate;
                $element.data('daterangepicker').updateView();
                $element.data('daterangepicker').updateCalendars();
                $element.data('daterangepicker').updateInputText();
            });

            $element.daterangepicker(options, function(start, end) {
                $scope.$apply(function () {
                    ngModel.$setViewValue({ startDate: start, endDate: end });
                    ngModel.$render();
                });
            });         
        }
    };
});

})(angular);

允许声明如下：

<date-range-picker ng-model="dateRange"
                   class="pull-right"
                   style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
                   min-date="{{minDate}}"
                   max-date="{{maxDate}}"
                   ranges="{'Last 7 Days': [moment().subtract('days', 6), moment()],
                            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')],
                            'Last 3 Months': [moment().subtract('month', 3).startOf('month'), moment().subtract('month', 1).endOf('month')]}">
    <i class="fontello-icon-calendar-alt-1"></i>
    <span>....</span>


    <b class="caret" style="margin-top: 8px"></b>
</date-range-picker>

使用 2 个日历选择自定义范围作为原始指令可以正常工作，但是在选择其中一个预定义范围时会出现问题。有人可以帮我解决这个问题吗？

更新：

我已经解决了这个问题，它是这样工作的：

<date-range-picker ng-model="dateRange"
                               class="pull-right"
                               style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"
                               ng-model="dateRange"
                               ranges="dateRange.ranges"
                               >
                <i class="fontello-icon-calendar-alt-1"></i>
                <span></span>
                <b class="caret" style="margin-top: 8px"></b>
</date-range-picker>

通过对指令的最小更改：

((angular) ->
  "use strict"
  angular.module("directives.daterangepicker", []).directive "dateRangePicker", ($compile, $parse) ->
    restrict: "E"
    require: "ngModel"
    link: ($scope, $element, $attributes, ngModel) ->
      format = (date) ->
        date.format options.format
      formatted = (dates) ->
        [format(dates.startDate), format(dates.endDate)].join options.separator
      options = {}
      options.format = $attributes.format or "MMM D, YYYY"
      options.separator = $attributes.separator or " - "
      options.opens = $attributes.opens or "left"
      options.minDate = $attributes.minDate and moment($attributes.minDate)
      options.maxDate = $attributes.maxDate and moment($attributes.maxDate)
      options.dateLimit = $attributes.limit and moment.duration.apply(this, $attributes.limit.split(" ").map((elem, index) ->
        index is 0 and parseInt(elem, 10) or elem
      ))
      options.ranges = $attributes.ranges and $parse($attributes.ranges)($scope)
      ngModel.$formatters.unshift (modelValue) ->
        return ""  unless modelValue
        modelValue

      ngModel.$parsers.unshift (viewValue) ->
        viewValue

      ngModel.$render = ->
        return  if not ngModel.$viewValue or not ngModel.$viewValue.startDate
        $element.find("span").html(formatted(ngModel.$viewValue))

      $scope.$watch $attributes.ngModel, (modelValue) ->
        if not modelValue or (not modelValue.startDate)
          ngModel.$setViewValue
            startDate: moment().startOf("day")
            endDate: moment().startOf("day")

          return
        $element.data("daterangepicker").startDate = modelValue.startDate
        $element.data("daterangepicker").endDate = modelValue.endDate
        $element.data("daterangepicker").minDate = modelValue.minDate
        $element.data("daterangepicker").maxDate = modelValue.maxDate
        $element.data("daterangepicker").updateView()
        $element.data("daterangepicker").updateCalendars()
        #$element.data("daterangepicker").updateInputText()

      $element.daterangepicker options, (start, end) ->
        alert "$apply#{moment(start).toDate()}"
        alert options.maxDate
        $scope.$apply ->
          ngModel.$setViewValue
            startDate: start
            endDate: end

          ngModel.$render()



) angular