I'm trying to set operation hours for a business. End time should be 1hr after the start time and the endtime dropdown should not show values on/ before start time. Here is my fiddle
(function() { 'use strict'; angular.module('agencyApp', []) .controller('HoursController', HoursController) .directive('timePicker', timePicker); function HoursController() { var vm = this; vm.print = function() { console.log(vm); }; vm.setClosed = setClosed; vm.setAllWeekdayClosed = setAllWeekdayClosed; vm.weekdays = [{ Day: 'Monday', fromTime: "Select", toTime: "Select" }, { Day: 'Tuesday', fromTime: "Select", toTime: "Select" }, { Day: 'Wednesday', fromTime: "Select", toTime: "Select" }, { Day: 'Thursday', fromTime: "Select", toTime: "Select" }, { Day: 'Friday', fromTime: "Select", toTime: "Select" }, { Day: 'Saturday', fromTime: "closed", toTime: "closed" }, { Day: 'Sunday', fromTime: "closed", toTime: "closed" }]; vm.closed = [ false, false, false, false, false, true, true ]; function setClosed(index) { if (vm.closed[index]) { vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed'; } if (!vm.closed[index]) { vm.weekdays[index].fromTime = 'Select'; vm.weekdays[index].toTime = 'Select'; } }; function setAllWeekdayClosed(index) { if (vm.closed[index]) { vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed'; } if (!vm.closed[index]) { vm.weekdays[index].fromTime = '7:00 am'; vm.weekdays[index].toTime = '3:00 pm'; } }; }
function timePicker() { var ddo = { template: '', restrict: 'E', require: 'ngModel', replace: true, compile: compileFn }; return ddo;
function compileFn(tElement, tAttrs) { tElement.attr('ng-model', tAttrs.ngModel); //tElement.attr('ng-disabled', tAttrs.ngModel + ' === "closed"'); return linkFn; }; function linkFn(scope, element, attrs) { scope.timings = ['Select', '12:15 am', '12:30 am', '12:45 am', '1:00 am', '1:15 am', '1:30 am', '1:45 am', '2:00 am', '2:15 am', '2:30 am', '2:45 am', '3:00 am', '3:15 am', '3:30 am', '3:45 am', '4:00 am', '4:15 am', '4:30 am', '4:45 am', '5:00 am', '5:15 am', '5:30 am', '5:45 am', '6:00 am', '6:15 am', '6:30 am', '6:45 am', '7:00 am', '7:15 am', '7:30 am', '7:45 am', '8:00 am', '8:15 am', '8:30 am', '8:45 am', '9:00 am', '9:15 am', '9:30 am', '9:45 am', '10:00 am', '10:15 am', '10:30 am', '10:45 am', '11:00 am', '11:15 am', '11:30 am', '11:45 am', '12:00 pm', '12:15 pm', '12:30 pm', '12:45 pm', '1:00 pm', '1:15 pm', '1:30 pm', '1:45 pm', '2:00 pm', '2:15 pm', '2:30 pm', '2:45 pm', '3:00 pm', '3:15 pm', '3:30 pm', '3:45 pm', '4:00 pm', '4:15 pm', '4:30 pm', '4:45 pm', '5:00 pm', '5:15 pm', '5:30 pm', '5:45 pm', '6:00 pm', '6:16 pm', '6:30 pm', '6:45 pm', '7:00 pm', '7:15 pm', '7:30 pm', '7:45 pm', 'closed' ]; }; } })(); 1 Answers
Answers 1
You will have to write a custom filter to filter out time options which are before selected start time.
I have done it for you. Please refer jsFiddle
angular.module('agencyApp', []) .controller('HoursController', HoursController) .directive('timePicker', timePicker) .filter('timeFilter', function () { return function (input, filterCriteria) { if (filterCriteria && filterCriteria !== "Select") { input = input || []; if (filterCriteria === 'closed') { return ['closed']; } var out = []; input.forEach(function (time) { if (moment(time, 'h:mm a').isAfter(moment(filterCriteria, 'h:mm a'))) { out.push(time); } }); return out; } else { return input; } }; }) I have added momentjs for time comparison.
Directive template will look like this.
<select class="input-small" ng-options="time as time for time in timings | timeFilter:min"></select> And now directive will use min attribute to filter.
scope:{ min: '=' } Usage
<time-picker ng-model="vm.weekdays[$index].toTime" id="aid-to-{{$index}}" name="to" min="vm.weekdays[$index].fromTime"></time-picker> See the min attribute accepting fromTime
0 comments:
Post a Comment