0

日付モデルが現在の日付よりも小さい場合、または日付が「期限切れ」になっている場合、個々の日付ピッカーを無効にするにはどうすればよいですか。

開始日と終了日の日付ピッカーを使用して UI を開発しています。最初は、バックエンドから返されたデータに応じて、必要な数の日付ピッカーを UI に含めることができます。ユーザーは、日付ピッカーをさらに追加することもできます。

で日付ピッカーを作成するために使用しているサンプルデータを次に示しngRepeatます。

        {
            "id": 1234,
            "seasons": [{
                "endDate": "2016-01-03",
                "startDate": "2015-09-10",
                "description": "2015"
            }, {
                "endDate": "2017-01-03",
                "startDate": "2016-09-10",
                "description": "2016"
            }]
        }

開始日と終了日が期限切れになっていない場合にのみ、ユーザーが日付ピッカーを介して日付を変更できる UI を作成しています。日付の有効期限が切れている場合は、日付ピッカーを無効にする必要があります。

参考までに私のUIです。ここに画像の説明を入力

私の現在のアプローチは、シーズン配列を反復処理し、startDate が今日よりも小さいかどうかを確認することです。 

        ss.datePickerStartDateEnabled = false;

        angular.forEach(ss.seasonSet.seasons, function(season, key) {
            if (season.startDate < today) {
                console.log('Less than today');
                ss.datePickerStartDateEnabled = true;
            }
        });

これまでのところ動作しますが、今日よりも遅くない startDate を無効にします。

これが私のhtmlです

<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index">
   <div ng-controller="DatePickerCtrl as datePicker">
      <div class="col-md-3">                      <!-- StartDate datepicker-->
         <div class="form-group has-feedback">
            <label for="username">Start Date</label>
            <input 
               type="text" 
               class="form-control" 
               id="startDate{{$index}}" <!-- id=startDate1 -->
               uib-datepicker-popup="{{}}" 
               ng-model="s.startDate" 
               is-open="datePicker.isOpen.startDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               ng-disabled="ss.datePickerStartDateEnabled" 
               close-text="Close"
               ng-click="datePicker.open($event, 'startDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
         <div class="form-group has-feedback">
            <label for="username">End Date</label>
            <input 
               type="text" 
               class="form-control"
               id="endDate+{{$index}}" 
               uib-datepicker-popup="{{}}" 
               ng-model="s.endDate" 
               is-open="datePicker.isOpen.endDate" 
               datepicker-options="datePicker.dateOptions" 
               ng-required="true"
               close-text="Close"
               ng-click="datePicker.open($event, 'endDate')"/>
            <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
         </div>
      </div>
   </div>
</div>

上記の条件に基づいて単一の日付ピッカーを無効にするために、コントローラでとid="endDate+{{$index}}"とともに datepicker 入力を使用するにはどうすればよいですか。ng-disabled="ss.datePickerStartDateEnabled"ss.datePickerEndtDateEnabled

私が行う必要がある他の検証があります。たとえば、日付が重複しておらず、開始日は前の終了日より後にする必要があります。最初に簡単なケースを解決しようとしています。

前もって感謝します。これがプランカーコードで、これがUIですが、日時ピッカーは機能していません。UI を向上させるには、フルスクリーンで表示してください。

4

2 に答える 2

0

次のパターンを使用して、この問題を解決できました。

日付が期限切れになった場合に日付ピッカーを無効にする UI ロジックを委任しましたDatePickerCtrl。

angular.module('someApp')
.controller('DatePickerCtrl', ['$filter', function($filter) {

    var datePicker = this;

    datePicker.dateOptions = {
        formatYear: 'yy',
        startingDay: 1,
    };

    var today = $filter('date')(new Date(), "yyyy-MM-dd");

    datePicker.startDateDisable = startDateDisable;
    datePicker.endDateDisable = endDateDisable;
    datePicker.open = open;

    //Useful to manage more than one datepicker in the same view
    //E.g. datepickers created in a ngRepeat
    datePicker.isOpen = {};

    function open($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        datePicker.isOpen[which] = true;
    }

    function startDateDisable(startDate) {
        return startDate <= today ? true : false;
    }

    function endDateDisable(endDate) {
        return endDate <= today ? true : false;
    }

    //Date format could come from user's profile preferences
    datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    datePicker.format = datePicker.formats[2];
}])

関連するのは関数startDateDisable(startDate)とendDateDisable(endDate)関数だけです。

次に、ng-disableddatepicker 入力にディレクティブを次のように使用しました。

<div class="form-group has-feedback">
   <label for="username">Start Date</label>
   <input 
      type="text" 
      class="form-control" 
      id="startDate{{$index}}"
      uib-datepicker-popup="{{format}}" 
      ng-model="s.startDate" 
      is-open="datePicker.isOpen.startDate" 
      datepicker-options="datePicker.dateOptions" 
      ng-required="true"
      ng-disabled="datePicker.startDateDisable(s.startDate)"
      close-text="Close"
      ng-click="datePicker.open($event, 'startDate')"
      date-validation/>
   <span class="form-control-feedback glyphicon glyphicon-calendar"></span>
</div>

関連するコードは、入力モデルのng-disabled="datePicker.startDateDisable(s.startDate)"どこにあります。s.startDateはDatePickerCtrl、UI の状態を管理します。データは別のコントローラーから取得されます。

endDate にも同じロジックが適用されます。

于 2016-04-05T18:06:03.100 に答える
0

で ng-disabled を使用するのinputが正しいアプローチです。

あなたのコメント、

これまでのところ動作しますが、今日よりも遅くない startDate を無効にします。

たとえば、異なる日付形式を比較している場合など、日付の比較に欠陥がある可能性があると思います。日付の比較後、inputvia ng-disabled を無効にするだけで完了です。

ng-disabled="ss.datePickerStartDateEnabled" また、本質的に「有効な場合は無効にする」と書かれている場所にも、意味上の混乱があり ます。

于 2016-04-05T16:25:53.237 に答える