PHP、Jquery 如何显示从开盘时间到收盘时间的范围时间

Question

当我知道开放和关闭时间时，我想以自定义格式显示开放和关闭时间，如果我有 day_id 3（星期二）的结果，那么开放时间为 08:00，关闭时间为 22:00 那么如何才能我按以下方式显示时间范围？我希望用户从以下时间范围中选择：08:1508:3008:45. . .21:45在刀片视图中：                                 <ul>                                        <li>                                            <label class="time-picker-toggle-wrapper">                                                <input type="radio" value="15:15" name="time-picker" />                                                <span class="time-name">3:15 PM</span>                                            </label>                                        </li>                                        <li>                                            <label class="time-picker-toggle-wrapper">                                                <input type="radio" value="15:30" name="time-picker" />                                                <span class="time-name">3:30 PM</span>                                            </label>                                        </li>                                        <li>                                            <label class="time-picker-toggle-wrapper">                                                <input type="radio" value="15:45" name="time-picker" />                                                <span class="time-name">3:45 PM</span>                                            </label>                                        </li>                                        <li>                                            <label class="time-picker-toggle-wrapper">                                                <input type="radio" value="16:00" name="time-picker" />                                                <span class="time-name">4:00 PM</span>                                            </label>                                        </li>                </ul>控制器：  $OpenHours=Storeday::where('storeinfo_id', $request->store_id)  ->Where('day_id',$request->day_id)  ->get();

Answer 1

使用从 open_time 到 close_time 的 DateRange，步长为 15 分钟。获得 24 小时和 12 小时两种格式，因为您同时使用这两种格式。构造 all $slots，传递到您的视图并迭代以创建所有单选按钮。

<?php

$result = [

  "open_time" => "08:00",

  "close_time" => "22:00",

];

$period = new DatePeriod(

  new DateTimeImmutable($result['open_time']),

  new DateInterval('PT15M'),

  new DateTimeImmutable($result['close_time']),

  DatePeriod::EXCLUDE_START_DATE

);

$slots = [];

foreach ($period as $date) {

  $slots[] = ['24format' => $date->format('H:i'), '12format' => $date->format('h:i A')];

}

var_dump($slots);

插槽：

array(55) {

  [0]=>

  array(2) {

    ["24format"]=>

    string(5) "08:15"

    ["12format"]=>

    string(8) "08:15 AM"

  }

  [1]=>

  array(2) {

    ["24format"]=>

    string(5) "08:30"

    ["12format"]=>

    string(8) "08:30 AM"

  }

  [2]=>

  array(2) {

    ["24format"]=>

    string(5) "08:45"

    ["12format"]=>

    string(8) "08:45 AM"

  }

  [3]=>

  array(2) {

    ["24format"]=>

    string(5) "09:00"

    ["12format"]=>

    string(8) "09:00 AM"

  }

  [4]=>

  array(2) {

    ["24format"]=>

    string(5) "09:15"

    ["12format"]=>

    string(8) "09:15 AM"

  }

  [5]=>

  array(2) {

    ["24format"]=>

    string(5) "09:30"

    ["12format"]=>

    string(8) "09:30 AM"

  }

  [6]=>

  array(2) {

    ["24format"]=>

    string(5) "09:45"

    ["12format"]=>

    string(8) "09:45 AM"

  }

  [7]=>

  array(2) {

    ["24format"]=>

    string(5) "10:00"

    ["12format"]=>

    string(8) "10:00 AM"

  }

  [8]=>

  array(2) {

    ["24format"]=>

    string(5) "10:15"

    ["12format"]=>

    string(8) "10:15 AM"

  }

  [9]=>

  array(2) {

    ["24format"]=>

    string(5) "10:30"

    ["12format"]=>

    string(8) "10:30 AM"

  }

  [10]=>

  array(2) {

    ["24format"]=>

    string(5) "10:45"

    ["12format"]=>

    string(8) "10:45 AM"

  }

  [11]=>

  array(2) {

    ["24format"]=>

    string(5) "11:00"

    ["12format"]=>

    string(8) "11:00 AM"

  }

  [12]=>

  array(2) {

    ["24format"]=>

    string(5) "11:15"

    ["12format"]=>

    string(8) "11:15 AM"

  }

  [13]=>

  array(2) {

    ["24format"]=>

    string(5) "11:30"

    ["12format"]=>

    string(8) "11:30 AM"

  }

  [14]=>

  array(2) {

    ["24format"]=>

    string(5) "11:45"

    ["12format"]=>

    string(8) "11:45 AM"

  }

  [15]=>

  array(2) {

    ["24format"]=>

    string(5) "12:00"

    ["12format"]=>

    string(8) "12:00 PM"

  }

  [16]=>

  array(2) {

    ["24format"]=>

    string(5) "12:15"

    ["12format"]=>

    string(8) "12:15 PM"

  }

  [17]=>

  array(2) {

    ["24format"]=>

    string(5) "12:30"

    ["12format"]=>

    string(8) "12:30 PM"

  }

  [18]=>

  array(2) {

    ["24format"]=>

    string(5) "12:45"

    ["12format"]=>

    string(8) "12:45 PM"

  }

  [19]=>

  array(2) {

    ["24format"]=>

    string(5) "13:00"

    ["12format"]=>

    string(8) "01:00 PM"

  }

  [20]=>

  array(2) {

    ["24format"]=>

    string(5) "13:15"

    ["12format"]=>

    string(8) "01:15 PM"

  }

  [21]=>

  array(2) {

    ["24format"]=>

    string(5) "13:30"

    ["12format"]=>

    string(8) "01:30 PM"

  }

  [22]=>

  array(2) {

    ["24format"]=>

    string(5) "13:45"

    ["12format"]=>

    string(8) "01:45 PM"

  }

  [23]=>

  array(2) {

    ["24format"]=>

    string(5) "14:00"

    ["12format"]=>

    string(8) "02:00 PM"

  }

  [24]=>

  array(2) {

    ["24format"]=>

    string(5) "14:15"

    ["12format"]=>

    string(8) "02:15 PM"

  }

  [25]=>

  array(2) {

    ["24format"]=>

    string(5) "14:30"

    ["12format"]=>

    string(8) "02:30 PM"

  }

  [26]=>

  array(2) {

    ["24format"]=>

    string(5) "14:45"

    ["12format"]=>

    string(8) "02:45 PM"

  }

  [27]=>

  array(2) {

    ["24format"]=>

    string(5) "15:00"

    ["12format"]=>

    string(8) "03:00 PM"

  }

  [28]=>

  array(2) {

    ["24format"]=>

    string(5) "15:15"

    ["12format"]=>

    string(8) "03:15 PM"

  }

  [29]=>

  array(2) {

    ["24format"]=>

    string(5) "15:30"

    ["12format"]=>

    string(8) "03:30 PM"

  }

  [30]=>

  array(2) {

    ["24format"]=>

    string(5) "15:45"

    ["12format"]=>

    string(8) "03:45 PM"

  }

  [31]=>

  array(2) {

    ["24format"]=>

    string(5) "16:00"

    ["12format"]=>

    string(8) "04:00 PM"

  }

  [32]=>

  array(2) {

    ["24format"]=>

    string(5) "16:15"

    ["12format"]=>

    string(8) "04:15 PM"

  }

  [33]=>

  array(2) {

    ["24format"]=>

    string(5) "16:30"

    ["12format"]=>

    string(8) "04:30 PM"

  }

  [34]=>

  array(2) {

    ["24format"]=>

    string(5) "16:45"

    ["12format"]=>

    string(8) "04:45 PM"

  }

  [35]=>

  array(2) {

    ["24format"]=>

    string(5) "17:00"

    ["12format"]=>

    string(8) "05:00 PM"

  }

  [36]=>

  array(2) {

    ["24format"]=>

    string(5) "17:15"

    ["12format"]=>

    string(8) "05:15 PM"

  }

  [37]=>

  array(2) {

    ["24format"]=>

    string(5) "17:30"

    ["12format"]=>

    string(8) "05:30 PM"

  }

  [38]=>

  array(2) {

    ["24format"]=>

    string(5) "17:45"

    ["12format"]=>

    string(8) "05:45 PM"

  }

  [39]=>

  array(2) {

    ["24format"]=>

    string(5) "18:00"

    ["12format"]=>

    string(8) "06:00 PM"

  }

  [40]=>

  array(2) {

    ["24format"]=>

    string(5) "18:15"

    ["12format"]=>

    string(8) "06:15 PM"

  }

  [41]=>

  array(2) {

    ["24format"]=>

    string(5) "18:30"

    ["12format"]=>

    string(8) "06:30 PM"

  }

  [42]=>

  array(2) {

    ["24format"]=>

    string(5) "18:45"

    ["12format"]=>

    string(8) "06:45 PM"

  }

  [43]=>

  array(2) {

    ["24format"]=>

    string(5) "19:00"

    ["12format"]=>

    string(8) "07:00 PM"

  }

  [44]=>

  array(2) {

    ["24format"]=>

    string(5) "19:15"

    ["12format"]=>

    string(8) "07:15 PM"

  }

  [45]=>

  array(2) {

    ["24format"]=>

    string(5) "19:30"

    ["12format"]=>

    string(8) "07:30 PM"

  }

  [46]=>

  array(2) {

    ["24format"]=>

    string(5) "19:45"

    ["12format"]=>

    string(8) "07:45 PM"

  }

  [47]=>

  array(2) {

    ["24format"]=>

    string(5) "20:00"

    ["12format"]=>

    string(8) "08:00 PM"

  }

  [48]=>

  array(2) {

    ["24format"]=>

    string(5) "20:15"

    ["12format"]=>

    string(8) "08:15 PM"

  }

  [49]=>

  array(2) {

    ["24format"]=>

    string(5) "20:30"

    ["12format"]=>

    string(8) "08:30 PM"

  }

  [50]=>

  array(2) {

    ["24format"]=>

    string(5) "20:45"

    ["12format"]=>

    string(8) "08:45 PM"

  }

  [51]=>

  array(2) {

    ["24format"]=>

    string(5) "21:00"

    ["12format"]=>

    string(8) "09:00 PM"

  }

  [52]=>

  array(2) {

    ["24format"]=>

    string(5) "21:15"

    ["12format"]=>

    string(8) "09:15 PM"

  }

  [53]=>

  array(2) {

    ["24format"]=>

    string(5) "21:30"

    ["12format"]=>

    string(8) "09:30 PM"

  }

  [54]=>

  array(2) {

    ["24format"]=>

    string(5) "21:45"

    ["12format"]=>

    string(8) "09:45 PM"

  }

}