當用戶按下無關輸入域上的Enter鍵時，角度引導日期選擇器打開

Question

我有2個日期選擇器，'from'日期和'to'日期用於搜索。還有一些輸入字段適用於不同的搜索條件以及一個提交按鈕。

當焦點位於文本字段上並且用戶按下Enter鍵時，焦點將移至第一個日期選擇器並打開日曆視圖，而不是發送表單。

標記爲形式（部分的相關性）：

<div class="form-group"> 
    <label class="col-xs-3 control-label" for="txtSupplierList" translate>Supplier</label> 
     <div class="col-xs-4"> 
      <input class="form-control" 
        id="txtSupplierList" 
        type="text" 
        ng-model="vm.supplierName" 
        placeholder="{{'name or ID'| translate}}" 
        ng-keyup="vm.searchAppls()" /> 
     </div> 
</div><!-- @form-group --> 

<div class="form-group value"> 
    <label class="col-xs-3 control-label" for="dateFrom" translate>Created date from</label> 

    <div class="col-xs-3"> 
     <p class="input-group p-group-format"> 
      <input class="form-control" 
        type="text" 
        ng-click="open1($event,'opened1')" 
        is-open="opened1" 
        max-date="maxDate" 
        placeholder="{{'dd/mm/yyyy' | translate}}" 
        datepicker-options="dateOptions" 
        ng-required="true" 
        datepicker-popup="{{format}}" 
        ng-model="vm.from" 
        current-text="{{'Today'| translate}}" 
        toggle-weeks-text="{{'Weeks'| translate}}" 
        clear-text="{{'Clear'| translate}}" 
        close-text="{{'Close'| translate}}" 
        ng-change="vm.logicalDates(vm.from, vm.to)" /> 
        <span class="input-group-btn"> 
         <button class="btn btn-standard" ng-click="open1($event)"> 
         <i class="glyphicon glyphicon-calendar"></i> 
         </button> 
        </span> 
        <div class="value form-group pull-right" ng-if="!vm.logicalDatesBool"> 
        <div class="note note-error" translate>'From' date should preceed 'to' date</div> 
     </div> 
    </p> 
</div> 

<label class="col-xs-1 middleLabel" for="dateUntil" translate>to</label> 

<div class="col-xs-3"> 
    <p class="input-group p-group-format"> 
     <input class="form-control" 
       type="text" 
       ng-click="open2($event, 'opened2')" 
       is-open="opened2" 
       max-date="maxDate" 
       placeholder="{{'dd/mm/yyyy' | translate}}" 
       datepicker-options="dateOptions" 
       ng-required="true" 
       datepicker-popup="{{format}}" 
       ng-model="vm.to" 
       current-text="{{'Today'| translate}}" 
       toggle-weeks-text="{{'Weeks'| translate}}" 
       clear-text="{{'Clear'| translate}}" 
       close-text="{{'Close'| translate}}" 
       ng-change="vm.logicalDates(vm.from, vm.to)" /> 
       <span class="input-group-btn"> 
        <button class="btn btn-standard" ng-click="open2($event)"> 
        <i class="glyphicon glyphicon-calendar"></i> 
        </button> 
       </span> 

    </p>              
</div> 

</div><!-- form group --> 

劃分2個datepickers我有一個在我的控制器此代碼之間的行爲（選項等爲了簡潔省略）：

vm.open = open; 

    $scope.open1 = function ($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened1 = true; 
    }; 

    $scope.open2 = function ($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened2 = true; 

    }; 

還有更多的形式，總共6個標準輸入字段，沒有什麼特別的，然後在最後提交一個按鈕。 因此，重申：問題在於，當用戶關注供應商文本輸入或任何其他，然後按Enter鍵而不是發送的表單（即搜索返回結果）時，第一個日期選擇器打開以顯示日曆。什麼是將日曆綁定到Enter鍵？

爲什麼會發生這種情況，我該如何解決？

Answer 1

回答我自己的問題，因爲這裏有SO的答案，但他們有標題，使他們很難找到，谷歌的結果顯示UI-Datepicker Github他們聲稱已多次修復此錯誤，但顯然有沒有這樣做。

所以，答案是here用戶rahil-wazir

對於我的每個輸入元素我添加的屬性：

ng-keypress="keyPress($event)" 

整個元素看起來是這樣的：

<input class="form-control" 
     id="fooID" 
     ng-model="vm.foobar" 
     maxlength="100" 
     placeholder="{{'Foo name'|translate}}" 
     ng-keyup="vm.searchFunction()" 
     ng-keypress="keyPress($event)" /> 

，然後在我的控制器功能中，我添加了一個像這樣的新功能：

 $scope.keyPress = function(e) { 
     // console.log(e); 
     if (e.charCode == 13) { 
      e.stopPropagation(); 
      e.preventDefault(); 
      e.bubbles = false; 
      searchFunction(); 
      return false; 
     } 
    } 

正如你所看到的，我還希望在按下Enter鍵時執行搜索，所以keyPress函數會調用它。與日期選擇器無關。