如何根据选定的开始时间在时间​​选择器下拉菜单中填充结束时间 [英] how to populate the end time in timepicker dropdown based on selected start time

问题描述

我正在尝试设置一家公司的营业时间.结束时间应在开始时间之后1小时，并且结束时间下拉列表中不应显示开始时间之前/之前的值. 这是我的小提琴

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 = { 模板: ''， 限制:"E"， 要求:"ngModel"， 替换:true， 编译:compileFn }; 返回ddo;

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'
  ];
};
  }
})();

推荐答案

您将必须编写一个自定义过滤器，以过滤掉在选定的开始时间之前的时间选项.

You will have to write a custom filter to filter out time options which are before selected start time.

我为你做了.请参考 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;
      }
    };
  })

我添加了momentjs以进行时间比较.

I have added momentjs for time comparison.

指令模板将如下所示.

<select class="input-small" ng-options="time as time for time in timings | timeFilter:min"></select>

现在指令将使用min属性进行过滤.

And now directive will use min attribute to filter.

scope:{
 min: '='
}

用法

<time-picker ng-model="vm.weekdays[$index].toTime" id="aid-to-{{$index}}" name="to" min="vm.weekdays[$index].fromTime"></time-picker>

请参见min属性接受fromTime

这篇关于如何根据选定的开始时间在时间​​选择器下拉菜单中填充结束时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！