扩展Angular uibDatePickerPopup指令以允许某些字符串

Question

我们需要使用uibDatePickerPopup指令，但允许输入某些文本而不是日期。我试图扩展指令，但我不断收到“Parser Error。值应该是日期对象”错误。

任何帮助都将不胜感激。

我希望弹出窗口显示的页面

    <gt-date-picker-popup cell="cell" gtFormDate ="cell.value" occurrence="dataRow.rowDimensions.OCCURRENCE" /> 

自定义模板还有一个

的附加按钮

            <ul role="presentation" class="uib-datepicker-popup dropdown-menu uib-position-measure" dropdown-nested ng-if="isOpen" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
          <li ng-transclude></li>
          <li ng-if="showButtonBar" class="uib-button-bar">
            <span class="btn-group pull-left">
              <button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
              <button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
              <button type="button" class="btn btn-sm btn-primary" ng-click="select('various', $event)">Various</button>      
            </span>
            <button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
          </li>
        </ul>

请参阅“各种”上方的按钮。因此，当用户点击它时，我希望该框能够在文本字段中设置值“各种”。

这是我到目前为止所做的。

        .directive( 'gtDatePickerPopup', ['$compile','$parse','$state','$document', function($compile,$parse,$state,$document) {

        return {
            scope:{
                cell: '=',
                occurrence : '=',
                },
            //template: '<input type="text" style="width:94px" uib-datepicker-popup="{{format}}" ng-model="cell.value" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" ng-click="open1($event)" close-text="Close" alt-input-formats="altInputFormats" datepicker-popup-template-url="app/templates/date-picker-popup-tpl.html" />',
            template: '<input class="form-control date-picker"  type="text" name="el_{{occurrence}}_{{cell.key}}" ng-style="{\'background-color\': cell.property.backgroundColor}" style="width:94px" uib-datepicker-popup="{{format}}" datepicker-popup-template-url="app/templates/date-picker-popup-tpl.html"  ng-disabled="cell.property.smartReadonly" ng-model="cell.value" ng-model-options="{allowInvalid:true}" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="false" ng-click="open1($event)" close-text="Close" alt-input-formats="altInputFormats" >',
            link: function (scope, element, attrs) {


                scope.today = function() {
                    scope.dt = new Date();
                  };
                  scope.today();

                  scope.clear = function() {
                    scope.dt = null;
                  };

                  scope.various = function() {
                      scope.dt = 'VARIOUS';
                  }

                  scope.inlineOptions = {
                    customClass: getDayClass,
                    minDate: new Date(),
                    showWeeks: true
                  };

                  scope.dateOptions = {
                    dateDisabled: disabled,
                    formatYear: 'yy',
                    maxDate: new Date(2020, 5, 22),
                    minDate: new Date(),
                    startingDay: 1
                  };

                  // Disable weekend selection
                  function disabled(data) {
                    var date = data.date,
                      mode = data.mode;
                    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                  }

                  scope.toggleMin = function() {
                    scope.inlineOptions.minDate = scope.inlineOptions.minDate ? null : new Date();
                    scope.dateOptions.minDate = scope.inlineOptions.minDate;
                  };

                  scope.toggleMin();

                  scope.open1 = function(event) { // alert('Open');
                    event.stopPropagation();
                    scope.popup1.opened = true;
                  };

                  scope.open2 = function() {
                    scope.popup2.opened = true;
                  };

                  scope.setDate = function(year, month, day) {
                    scope.dt = new Date(year, month, day);
                  };

                  scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                  scope.format = scope.formats[0];
                  scope.altInputFormats = ['M!/d!/yyyy'];

                  scope.popup1 = {
                    opened: false
                  };

                  scope.popup2 = {
                    opened: false
                  };

                  var tomorrow = new Date();
                  tomorrow.setDate(tomorrow.getDate() + 1);
                  var afterTomorrow = new Date();
                  afterTomorrow.setDate(tomorrow.getDate() + 1);
                  scope.events = [
                    {
                      date: tomorrow,
                      status: 'full'
                    },
                    {
                      date: afterTomorrow,
                      status: 'partially'
                    }
                  ];

                  function getDayClass(data) {
                    var date = data.date,
                      mode = data.mode;
                    if (mode === 'day') {
                      var dayToCheck = new Date(date).setHours(0,0,0,0);

                      for (var i = 0; i < scope.events.length; i++) {
                        var currentDay = new Date(scope.events[i].date).setHours(0,0,0,0);

                        if (dayToCheck === currentDay) {
                          return scope.events[i].status;
                        }
                      }
                    }

                    return '';
                  }
            }

        }

    }])