2

AngularStrap datepicker ディレクティブを使用して実装される 2 つの datepicker フィールドがあります: http://mgcrea.github.io/angular-strap/。

<input type="text" name="startDate" ng-model="startDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker />
<button type="button" class="btn" data-toggle="datepicker">
    <i class="icon-calendar"></i>
</button>

<input type="text" name="endDate" ng-model="endDate" data-date-format="dd/mm/yyyy" placeholder="DD/MM/YYYY" bs-datepicker />
<button type="button" class="btn" data-toggle="datepicker">
    <i class="icon-calendar"></i>
</button>

2 つの日付フィールドの差を計算するコントローラーもあります。startDate と endDate。

$scope.numberOfDays = function() {
    if ($scope.startDate != null && $scope.endDate != null) {
         var startDate = $scope.startDate;
         var endDate = $scope.endDate;

         var millisecondsPerDay = 1000 * 60 * 60 * 24;
         var millisBetween = endDate.getTime() - startDate.getTime();
         var days = millisBetween / millisecondsPerDay;

         return Math.floor(days);
    }
};

計算結果をここに示します。

<input type="text" name="numberOfDays" ng-model="numberOfDays" 
value="{{numberOfDays()}} disabled />

ここで、datepicker を使用して日付を選択した後、スコープを調べると、startDate と endDate の両方が空の配列の値のみを表示しています: { } ここで何が問題なのか分かりますか? また、numberOfDays() を現在のスコープにどのように追加しますか。ng-model="numberOfDays" を追加しようとしましたが、計算が処理されているとき、numberOfDays のスコープ値はまだ null です。任意のヘルプと提案をいただければ幸いです。

4

1 に答える 1

3

日差式の変更に対する監視リスナーを設定します。

HTML

<input type="text" name="numberOfDays" ng-model="numberOfDays" />

コントローラ

$scope.$watch(function() {
    return Math.floor(($scope.endDate - $scope.startDate) / 86400000);
}, function(days) {
    $scope.numberOfDays = days;
});

ここから取得した簡略化された日数の計算 - https://stackoverflow.com/a/544429/283366

プランカーの例はこちら - http://plnkr.co/edit/MPNh7O?p=preview

于 2013-07-01T06:01:54.480 に答える