UIBootstrap和Angularjs日期選擇器黏合並直接進入

Question

我們是基於HotTowel模板使用Angularjs和微風SPA工作

我們的頁面上有多個datePickers這是給我們以下問題：

• 當用戶鍵入日期選擇器時，日期選擇器打開，但當用戶選擇下一個控件時不會關閉。由於日期選擇器堆疊在ui的同一列中，因此會導致下拉菜單覆蓋下面的字段。清除它們的唯一方法是選擇日期或單擊表格中的其他位置

• 編輯與數據模型綁定的現有記錄時，用戶無法在輸入區中鍵入日期。如果他們突出顯示日期並嘗試輸入日期，則會刪除現有日期，並且不允許用戶鍵入新日期。如果他們點擊X來清除輸入字段，他們不能輸入新的日期。如果他們的日期和退格的結束位置的指針，日期消失，日曆選擇器設置爲一月1902

從本質上講，這很好，如果用戶願意拿起鼠標並在選取器中點擊日期，並且不會嘗試輸入日期。這對我們的用戶羣來說並不現實。

下面是HTML：

       <label for="ApplicationCompleteDate" data-ng-show="vm.mode === 'edit'"><strong>Application Complete Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="ApplicationCompleteDate" type="text" class="form-control input-medium" tabindex="16" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.applicationCompleteDateOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateApplicationComplete" 
              data-ng-required="vm.applicationCompleteDateRequired" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span> 
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.applicationCompleteDateOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 
          <label for="DecisionDatePicker" data-ng-show="vm.mode === 'edit'"><strong>Decision Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.decisionDateOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateDecision" 
              data-ng-required="vm.decisionDateRequired" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span>          
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.decisionDateOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 
          <label for="DateClosedPicker" data-ng-show="vm.mode === 'edit'"><strong>Closed Date:</strong></label> 
          <div class="input-append" data-ng-show="vm.mode === 'edit'"> 
           <span> 
            <input name="DateClosedPicker" type="text" class="form-control input-medium" tabindex="15" placeholder="{{vm.format}}" 
              datepicker-popup="{{vm.format}}" close-text="Close" show-weeks='false' 
              is-open="vm.dateClosedOpened" 
              datepicker-options="vm.dateOptions" 
              data-ng-model="vm.formData.dateClosed" 
              data-ng-required="false" 
              data-ng-readonly="(!user.isInUserGroup && vm.mode === 'new') || (!user.isInCPUGroup && vm.mode === 'edit')" /> 
           </span>          
           <span class="add-on"> 
            <a href="#" data-ng-click="vm.dateClosedOpen($event)"><i class="icon-calendar"></i></a> 
           </span> 
          </div> 

我們正在使用的雙向與NG-模型綁定。

任何幫助，將不勝感激。

感謝

Answer 1

有同樣的問題，我發現有問題的代碼： 它在breeze.debug.js線4786

// exit if no change - extra cruft is because dateTimes don't compare cleanly. 
if (newValue === oldValue || (dataType && dataType.isDate && newValue && oldValue && newValue.valueOf() === oldValue.valueOf())) { 
    return; 
} 

問題是，angulars髒檢查只是做===所以最後它會覆蓋視圖值，因爲它與模型中的視圖值不一樣（因爲微風會跳過更新）。如果在||之後省略部分你可以正常輸入數值，儘管我遇到了一組不同的問題。

這是角度觀察數據和微風的方式之間的不匹配。我希望沃德看到這一點。我會拿一張票。不知道什麼是處理它的好地方，但我認爲微風將是唯一的（因爲棱角在pojos中效果很好）。我會更新參考而沒有更新本身的副作用。

Answer 2

如果你想讓我看看這個，我需要一個repro來處理。闖入者會很好。

我不認爲我們可以改變我們的財產測試。我們有一個很好的理由去了那麼多麻煩。 Angular沒有任何DataType的概念，所以它不能做我們所做的事情。

但是我們應該能夠得到一個合適的解決方案，可能涉及到Angular。例如，你可以爲此寫一個簡單的指令。你可以用現有的Ng來處理它;我隱約記得你可以指定一個可以複製breeze邏輯的綁定解析器。自從我看了這篇文章的時間太長了，但我認爲它就在那裏。

Answer 3

我遇到了同樣的問題，並通過在視圖模型上創建一個本地範圍的佔位符變量來綁定到日期選擇器來解決它。

<input type="text" 
    class="form-control" 
    datepicker-popup="M/d/yyyy" 
    is-open="vm.openedStartDate" 
    ng-model="vm.selectedStartDate" 
    close-text="Close" 
    show-button-bar="false" /> 

這允許日期選擇器所需的行爲。

我然後只保存更改之前設置的微風實體值這個局部變量：

task.StartDate = vm.selectedStartDate; 
task.EndDate = vm.selectedEndDate; 
datacontext.saveChanges(); 

它並不完美，但它是你所描述的問題，一個可行的解決方法。