3

Angular のブートストラップ タイム ピッカーの最小時間と最大時間を設定する方法はありますか? Angular の Datepicker 設定では、最小日付と最大日付がサポートされています。Timepicker に同様の機能が許可されているかどうか疑問に思っています。

Timepickerの Angular ドキュメントの設定を見ると、これを行う方法がないように見えます...しかし、誰かがこの動作を達成する方法に精通しているかどうか疑問に思っています。事前に洞察/アドバイスをありがとう！

編集：

私がやろうとしていることの背景をもう少し説明するには：

2 つのタイムピッカーが並んでいます。左側のピッカーでは開始時刻を選択でき、右側のピッカーでは終了時刻を選択できます。どちらの開始時刻を選択しても、終了時刻のタイムピッカーの下限を設定し、どちらの終了時刻を選択しても、開始時刻のタイムピッカーの上限を設定する必要があります。

4

1 に答える 1

1

「開始」時刻が「終了」時刻より後になると、「終了」時刻も「開始」時刻より前になるため、検証が正しく機能する場合は、実際には minTime または maxTime のいずれかを設定する必要があります。

私はあなたが説明していることを正確にやりたかったので、それを行うためのディレクティブを書きました。

「終了」タイムピッカーの属性として「minTime」を選択し、それを「開始」タイムピッカーのモデルに設定しました。次に、ディレクティブは両方のモデルへの変更を監視し、「開始」時間が変更された場合は minTime を更新し、「開始」が「終了」より前であるかどうかに基づいてモデルの検証を設定します。

ng-model が設定されている限り、input[time] 要素でも使用できます。

最初はパーサーとフォーマッターを使用して $watch を回避しようとしましたが、次に変更するまでモデルを無効として登録しませんでした。

これがディレクティブです。自由にwtfを実行してください：

directive('minTime', function (){ 
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elem, attrs, ctrl) {
            var minTime;

            scope.$watch(attrs.minTime, function(newVal) {
                minTime = newVal;
                validate();
            });

            scope.$watch(attrs.ngModel, validate);

            function validate(value) {
                ctrl.$setValidity('minTime', (minTime < ctrl.$modelValue));
                return value;
            }
        }
    };
})
于 2014-12-11T21:21:07.627 に答える