Возможность выбрать время после полуночи - PullRequest
Новая
       6

Возможность выбрать время после полуночи

0 голосов
/ 24 мая 2018

У меня часы открытия и закрытия, выберите выпадающий список.Это в основном, чтобы выбрать часы открытия и закрытия магазина.Я создал список часов с 15-минутным интервалом с 12:00 утра до 12:00 полуночи.

  $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 и Время закрытия : 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];
  };
    }
  };
});

Плункер

Проблема:
Вы видите, я просто добавляю remainingTimings = scope.availableTimes.slice(1,index -1);.Это дает возможность выбрать время после полуночи, но технически на миллисекундном уровне 2:00 утра меньше, чем 11:00 утра.

Как я могу добавить один дополнительный день в миллисекундах, если кто-то что-нибудь выберет после 12:00 полуночи?

Надеюсь, я смог объяснить четко.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Я бы не создавал списки.Первый список можно просто записать в 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.
}

Вы, вероятно, можете переписать ту же логикус фактическими угловыми и моментными методами.

Используя реальные даты вместо попыток воссоздать временные метки в списке, вы избегаете всевозможных проблем с временными метками, таких как летнее время, месячные барьеры в последний день месяца, годбарьеры 31 декабря и т. д.

Вы можете использовать тот же принцип для создания списков, если, например, часы закрытия не всегда должны составлять 15 часов, смысл в том, чтобы сделать всерасчеты с полными датами, а не только частью времени, поэтому дата фактически изменится на следующий день, если время закрытия - следующий день

0 голосов
/ 24 мая 2018

Просто добавьте 24 часа, если время закрытия меньше вашего времени открытия

...