How to set min-time and max-time for Angular Timepicker?

Question

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.

I put the directive in my answer into a module. You can find it on Github. — spongessuck

spongessuck spongessuck · Accepted Answer · 2014-12-11T21:21:07

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

How to set min-time and max-time for Angular Timepicker?

1 Answers