UI Bootstrap datepicker日曆不顯示文本框中的日期

我在我的視圖中有一個頁面，並且有一個編輯該頁面的選項。當點擊「編輯」選項時，會出現一個子視圖並顯示所有可編輯字段。一個字段是一個綁定到模式的日期選擇器。UI Bootstrap datepicker日曆不顯示文本框中的日期

文本框包含日期，但是當我打開日曆彈出窗口時，日曆中未突出顯示文本框中的日期。然後我選擇不同的日期並關閉子視圖。

現在，當我打開另一個項目的日曆彈出窗口時，之前選擇的日期將突出顯示。（在文本框中的日期是不同的）我堅持這一段時間了。下面是我的標記

<div class="col-sm-4 ph-calendar"> 
        <div class="input-group"> 
         <input type="text" 
           id="duedate" 
           class="form-control" 
           datepicker-popup="{{dateFormat}}" 
           ng-model="milestone.duedate" 
           ph-validator="milestone.duedate" 
           ng-required="true" 
           is-open="datepickerOpenState.dueDateOpened" 
           datepicker-options="dateOptions" 
           ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones" 
           close-text="Close" 
           tooltip="dd/mm/yyyy" 
           tooltip-placement="bottom" 
           ph-datepicker-fix />        

         <span class="input-group-btn datepickerbtn"> 
          <button type="button" class="btn btn-default" ng-click="openDatepicker($event, 'duedate')" ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones"> 
           <i class="fa fa-calendar"></i> 
          </button> 
         </span> 
        </div> 
       </div>

這是我的js

$scope.openDatepicker = function ($event, dateType, date) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      switch (dateType) { 
       case 'duedate': 
        $scope.datepickerOpenState.dueDateOpened = true; 
        $scope.datepickerOpenState.completionDateOpened = false; 
        $scope.datepickerOpenState.startDateOpened = false; 
        $scope.datepickerOpenState.endDateOpened = false;       
        break;

我也做了一些格式的日期選擇

ngModelCtrl.$render = function() { 

      if (ngModelCtrl.$viewValue) { 
      ngModelCtrl.$viewValue = new Date(ngModelCtrl.$viewValue); 
      var dateVal = ngModelCtrl.$viewValue ? $filter('date')(ngModelCtrl.$viewValue, 'dd/MM/yyyy') : ''; 

      $element.val(dateVal);               
      } else { 
       $element.val(null); 
      } 
     };

來源

2016-03-11 Pradeep

我得到了同樣的問題，我建議使用momentJs。 – Pterrat

顯然，NG-模式「NG-模型$ - 日期目的。需要成爲一個Javascript日期對象。'當你點擊編輯它來自你的服務器作爲JSON，這是一個字符串，而不是一個JavaScript日期對象，這就是爲什麼發生這種情況。從該字符串創建一個Date對象，你應該沒問題，它對我有用！

編輯：發現它在「uib-datepicker settings」下的文檔https://angular-ui.github.io/bootstrap/#/datepicker上。感謝@JohanAlkstål在https://jabbr.net/#/rooms/AngularJS幫助我解決這個問題。

來源

2016-04-01 13:58:08 Daniel

對我來說，問題在於我用於日期選擇器的輸入元素是「文本」類型而不是「日期」。

所以改變你的代碼應該這樣做。

<input type="date" />

來源

2017-03-30 07:37:32 knaos

只是爲了幫助...

我有同樣的問題，而且由於@Daniel答案，我只是改變我的控制值強制Date類型與moment.js

之前：

vm.popEstime = { 
      opened: false, 
      value: vm.currentData.DateEstime 
     };

後：

vm.popEstime = { 
      opened: false, 
      value: moment(vm.currentData.DateEstime).toDate() 
     };

而我的html沒有改變：

<input ng-model="vm.popEstime.value" uib-datepicker-popup="dd/MM/yyyy" is-open="vm.popEstime.opened" type="text" required />

來源

2017-07-19 08:05:11 lolo

UI Bootstrap datepicker日曆不顯示文本框中的日期

回答

相關問題