如何设置角度时间选择器的最小时间和最大时间? [英] How to set min-time and max-time for Angular Timepicker?

问题描述

是否可以为Angular的引导时间选择器设置最短时间和最长时间?使用Angular的Datepicker设置，可以支持最小和最大日期，我想知道是否存在类似的功能允许使用时间选择器.

查看 Timepicker的Angular文档中的设置，它不会出现有一种方法可以做到……但是只是想知道是否有人熟悉实现这种行为的方法.在此先感谢您的见解/建议！

---

为我想做的事情提供更多背景信息:

我有两个Timepickers并排.左侧的一个允许用户选择开始时间，右侧的选择器则允许用户选择结束时间.选择任何开始时间都应设置结束时间"选择器的下限，选择任何结束时间都应设置开始时间选择器"的上限.

解决方案

如果您的验证正确运行，您实际上只需要设置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;
            }
        }
    };
})

Is there a way to set a minimum time and maximum time for Angular's bootstrap time picker? With Angular's Datepicker setting a min and max date is supported, and I am wondering if there is a similar functionality allowed for the Timepicker.

Looking at the settings in the Angular Documentation for Timepicker it does not appear there is a way to do this... but just wondering if anyone is familiar with a way to achieve this behaviour. Thanks in advance for and insights/advice!

---

Edit:

To give some more background on what I am trying to do:

I have two Timepickers side by side. The one on the left allows a user to select a Start time and the picker on the right allows a user to select an End time. Whichever Start time is selected should set the bottom limit for the End time Timepicker, and whichever End time is selected should set the top limit for the Start time Timepicker.

解决方案

You really only need to set either minTime or maxTime if your validation works correctly, since once your 'start' time is after the 'end' time, the 'end' time is also before 'start' time.

I wanted to do exactly what you're describing and ended up writing a directive to do it.

I picked 'minTime' as my attribute on my 'end' timepicker and set it to the model for my 'start' timepicker. The directive then watches for changes to both models, updates minTime if 'start' time changes, and sets validation on the model based on if 'start' is before 'end'.

You can also use it on input[time] elements as long as ng-model is set.

I tried avoiding $watch at first by using parsers and formatters but it ended up not registering the model as invalid until the next time I changed it.

Here's the directive. Feel free to do wtf you want with it:

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;
            }
        }
    };
})

这篇关于如何设置角度时间选择器的最小时间和最大时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！