web-dev-qa-db-ja.com

angular-ui datepicker datepickerの初期状態がdatepicker-popupごとにフォーマットされていません

私はangular-uiの日付ピッカーを使用していますが、日付ピッカーの初期状態を除いて、すべてが実際に正常に機能しています。私が日付を選んだ後、それはうまく見えます。下記参照：

初期状態

enter image description here

ピッカーで日付を選択した後

enter image description here

つまり、最初のケースでは日付オブジェクトの圧縮バージョンを取得し、日付を選択した後にフォーマットしていることは明らかです。

マークアップ

<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厳格な日付オブジェクトではなく、まず始めに。また、違いがわかりませんが、この日付ピッカーはモーダル内にあります。助けてくれてありがとう！

[〜＃〜]更新[〜＃〜]

これを経験しているのは私だけではないようで、angular 1.3。 https://github.com/angular-ui/bootstrap/issues/2659の使用に関連しています。

angularjsdatepickerangular-ui-bootstrap
18
Greg

どこで/どこでも解決策が長く、ディレクティブなどで処理されることがわかったので、私はこの短い解決策を好みます

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

注：注入することを忘れないangular組み込み$ filterコントローラへのサービス

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

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

       /* your code here */ 
}]);

お役に立てれば。

4
Premchandra Singh

bootstrap 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

3
ch4nd4n

Premchandra Singhの回答を改善するには、angular $ filterサービスを使用して機能しますが、将来の更新にフィルターを適用するには、日付フィールドにウォッチを追加する必要があります。

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

Githubの問題で説明されているもの以外に、私にとってうまくいった別の回避策は、日付オブジェクトではなく、ミリ秒単位のエポック時間でモデルを初期化することです、たとえば：

$scope.dt = new Date().getTime();
0
Andreas Ågren