angular-ui datepicker datepicker的初始狀態未格式化爲每個datepicker-popup

我正在使用angular-ui datepicker，並且一切實際上都正常工作，但datepicker的初始狀態除外。當我選擇一個日期時，它看起來很好。請看下圖：angular-ui datepicker datepicker的初始狀態未格式化爲每個datepicker-popup

初始狀態

enter image description here

在選擇器

enter image description here

所以選擇了日期後，顯然我得到的的strigified版本在第一種情況下爲日期對象，在選擇日期後格式化。

標記

<input type="text" class="form-control" 
     id="birthday" 
     datepicker-options="datePickerOptions" 
     datepicker-popup="{{format}}" 
     data-ng-model="birthday" 
     data-is-open="opened" 
     data-ng-required="true" 
     data-close-text="Close"/> 

<span class="input-group-btn"> 
    <button type="button" 
      class="btn btn-default" 
      data-ng-click="open($event)"> 
     <i class="fa fa-calendar"></i> 
    </button> 
</span>

的控制器

var today = $scope.today = function today() { 
    $scope.birthday = $scope.client.birthday || new Date(); 
}; 
today(); 

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

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

    $scope.opened = true; 
}; 

$scope.format = 'MMM d, yyyy'; 
$scope.datePickerOptions = { 
    'show-weeks': false 
};

不是一個大問題，但將是非常好的，如果其需要的模型（爲每對文檔的日期對象）被格式化爲每個$scope.format開始，而不是一個嚴格的日期對象。此外，不知道它有什麼不同，但這個日期選擇器是在一個模式。謝謝你的幫助！

UPDATE

看起來像我不是唯一一個遇到此，並且它與使用角1.3。 https://github.com/angular-ui/bootstrap/issues/2659

來源

2014-10-04 Greg

圍繞着另一種工作爲我工作，除了在GitHub的問題所描述的，是在毫秒時代的時間，而不是一個約會對象，如初始化模式：

$scope.dt = new Date().getTime();

來源

2014-12-11 09:16:57

這並努力解決顯示問題，但它會將您的綁定模型var變成timestamp int而不是Date對象。如果在彈出窗口中點擊日期不會再次將其重新轉換爲Date對象，這意味着使用它的代碼首先需要執行麻煩的類型檢查。 – Fasermaler 2015-03-02 12:56:31

我類似的問題，看起來像引導UI是AngularJS的1.3.x版本不兼容

這plunkr解決這個問題對我來說http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit: 
.directive('datepickerPopup', function(){ 
    return { 
    restrict: 'EAC', 
    require: 'ngModel', 
    link: function(scope, element, attr, controller) { 
     //remove the default formatter from the input directive to prevent conflict 
     controller.$formatters.shift(); 
    } 
    } 
});

另請參閱Github的票https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976

來源

2015-03-11 20:59:47 ch4nd4n

這不適用於角1.3.15 – 2015-04-23 21:51:32

工作對我來說非常好！謝謝，這是angularjs庫問題..mine是1.3，只是注入它的指令，你應該是好的！ – Manam 2016-03-30 18:38:31

在哪裏/哪裏以往的解決方案，我發現他們是漫長的，由指令等處理所以我更喜歡這短短的一個

birthday = $filter('date')(new Date(), "MMM dd, yyyy");

注：不要忘記注入角建於$過濾服務到控制器

angular.module('app').controller("yourController", 
['$filter' function($filter){ 
     /* your code here */ 

     birthday = $filter('date')(new Date(), "MMM dd, yyyy"); 

     /* your code here */ 
}]);

希望這有助於。

來源

2015-03-31 13:04:27

不幸的是，這個綁定屬性變成了一個不是日期的字符串，然後一旦選擇了另一個日期，它就會變回日期，就像AndreasÅgren的解決方案意味着在提交前必須進行一些類型檢查。 – csharpsql 2015-04-24 09:38:22

爲了改善這一點，手錶到您使用的日期字段，將添加一個單獨的答案。 – csharpsql 2015-04-24 09:43:08

爲了改善Premchandra辛格的答案，使用角$過濾服務的工作，但你也需要添加監視到你的日期字段應用在未來的更新過濾器：

$scope.myDate = $filter('date')(new Date(), 'dd.MM.yy'); 
$scope.$watch('myDate', function (newValue, oldValue) { 
    $scope.myDate = $filter('date')(newValue, 'dd.MM.yy'); 
});

來源

2015-04-24 09:45:35 csharpsql

angular-ui datepicker datepicker的初始狀態未格式化爲每個datepicker-popup

回答

相關問題