Question

我打开和关闭时间选择下拉列表。这基本上是选择商店的营业时间。我已经创建了从上午12:00到午夜12点15分钟间隔的小时列表。

  $scope.availableTimes = [];
  $scope.availableTimes.push({
    'msValue': 0,
    'display': '12:00 Morning'
  });
  for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
    $scope.availableTimes.push({
      'msValue': msValue,
      'display': moment(msValue).utc().format("h:mm A")
    })
  }
  var dayMS = 86400000 - 1;
  $scope.availableTimes.push({
    'msValue': dayMS,
    'display': '12:00 Midnight'
  });

但可能有些情况下他们想选择 营业时间：上午11:00＆amp; 关闭时间：凌晨2:00（午夜后）总共15个小时。

要处理这种情况visually我做了一个解决方法。我根据开放时间选择重新安排了关闭时间。

例：
如果选择营业时间为上午11:00，则营业时间将从上午11:15到上午10:45开始。

这里是关闭营业时间列表的指令：

app.directive('closingTimeSync',function(){
  return {
    template: `<div class="col-xs-6">
      <div class="form-group">
        <label for="exampleFormControlSelect1">Closing Hours</label>
         <select class="form-control" data-ng-options="time.display for time in closingTimes" data-ng-model="selectedToTime">
        </select>
      </div>
    </div>`,
    replace: true,
    transclude: true,
    link: function(scope) {

    scope.automaticallySelectClosingTime = function(msValue) {
     scope.closingTimes = scope.availableTimes;
     var dayMS = 86400000 - 1;
     var remainingTimings = [];
     var index = scope.closingTimes.map(function(obj){return obj.msValue;}).indexOf(msValue);
     index = (index === scope.availableTimes.length-1) ? 1 : index+1;
     scope.closingTimes = scope.closingTimes.slice(index,scope.availableTimes.length);
     if(msValue !== dayMS) {
      remainingTimings = scope.availableTimes.slice(1,index -1);
     }
     scope.closingTimes = scope.closingTimes.concat(remainingTimings);
     scope.selectedToTime = scope.closingTimes[0];
  };
    }
  };
});

Plunker

问题：
你可以看到我只是添加了remainingTimings = scope.availableTimes.slice(1,index -1);。它提供了在午夜之后选择时间的能力，但技术上在上午2:00的毫秒级别小于上午11:00。

如果有人在午夜12点之后选择了任何内容，我怎么能在几毫秒内再添加一天？

希望我能够清楚地解释。

Answer 1

如果收盘时间低于开盘时间，则只需添加24小时

Answer 2

我不会创建列表。第一个列表可以直接写入HTML，因为它永远不会改变。或者您可以使用简单的角度循环而不是范围查找来创建它。每天从00:00开始，到23:59结束

第二个列表只是第一个列表+商店打开的时间。你事先就知道了。（15小时）

所以我会选择这样的事情：

<select>
    <option value="00:00">00:00</option>
    <option value="00:15">00:15</option>
    <!-- add more options -->
    <option value="23:45">23:45</option>
</select>

对于事件处理程序：

function( event ) {
    // Get the selected value in the dropdown.
    const time_chunks = event.target.value.split( ':' );
    // Get the current datetime.
    const opening = new Date();
    // Set the current datetimes hours and minutes to the selected value so opening equals todays opening time.
    opening.setHours( time_chunks[ 0 ] );
    opening.setMinutes( time_chunks[ 1 ] );
    // 3600000 miliseconds = 1 hour
    const hours_open = 15;
    const ms_open = hours_open * 3600000;
    const closing = new Date( opening.getTime() + ms_open );
    // Add code to transform the datetime into the label you need.
    // Add code to save the current state in $scope if needed.
    // Add code to select the correct option in the second dropdown.
}

你可以用实际的角度和力矩方法重写相同的逻辑。

通过使用实际日期而不是尝试在列表中重新创建时间戳，可以避免各种时间戳问题，例如夏令时，一个月最后一天的月障碍，十二月三十一年的年度障碍等等。

您可以使用相同的原则来生成列表，例如，如果关闭时间不一定必须是15小时，重点是，所有计算都使用完整日期时间而不是仅仅时间部分所以如果关闭时间是第二天，日期将实际变为第二天

能够选择午夜后的时间

2 个答案: