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

Question

当我知道开放和关闭时间时，我想以自定义格式显示开放和关闭时间，如果我有 day_id 3（星期二）的结果，那么开放时间为 08:00，关闭时间为 22:00 那么如何才能我按以下方式显示时间范围？

我希望用户从以下时间范围中选择：

08:15

08:30

08: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 = [&nbsp; "open_time" => "08:00",&nbsp; "close_time" => "22:00",];$period = new DatePeriod(&nbsp; new DateTimeImmutable($result['open_time']),&nbsp; new DateInterval('PT15M'),&nbsp; new DateTimeImmutable($result['close_time']),&nbsp; DatePeriod::EXCLUDE_START_DATE);$slots = [];foreach ($period as $date) {&nbsp; $slots[] = ['24format' => $date->format('H:i'), '12format' => $date->format('h:i A')];}var_dump($slots);插槽：array(55) {&nbsp; [0]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "08:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:15 AM"&nbsp; }&nbsp; [1]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "08:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:30 AM"&nbsp; }&nbsp; [2]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "08:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:45 AM"&nbsp; }&nbsp; [3]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "09:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:00 AM"&nbsp; }&nbsp; [4]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "09:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:15 AM"&nbsp; }&nbsp; [5]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "09:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:30 AM"&nbsp; }&nbsp; [6]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "09:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:45 AM"&nbsp; }&nbsp; [7]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "10:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "10:00 AM"&nbsp; }&nbsp; [8]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "10:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "10:15 AM"&nbsp; }&nbsp; [9]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "10:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "10:30 AM"&nbsp; }&nbsp; [10]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "10:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "10:45 AM"&nbsp; }&nbsp; [11]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "11:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "11:00 AM"&nbsp; }&nbsp; [12]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "11:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "11:15 AM"&nbsp; }&nbsp; [13]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "11:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "11:30 AM"&nbsp; }&nbsp; [14]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "11:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "11:45 AM"&nbsp; }&nbsp; [15]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "12:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "12:00 PM"&nbsp; }&nbsp; [16]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "12:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "12:15 PM"&nbsp; }&nbsp; [17]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "12:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "12:30 PM"&nbsp; }&nbsp; [18]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "12:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "12:45 PM"&nbsp; }&nbsp; [19]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "13:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "01:00 PM"&nbsp; }&nbsp; [20]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "13:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "01:15 PM"&nbsp; }&nbsp; [21]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "13:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "01:30 PM"&nbsp; }&nbsp; [22]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "13:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "01:45 PM"&nbsp; }&nbsp; [23]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "14:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "02:00 PM"&nbsp; }&nbsp; [24]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "14:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "02:15 PM"&nbsp; }&nbsp; [25]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "14:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "02:30 PM"&nbsp; }&nbsp; [26]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "14:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "02:45 PM"&nbsp; }&nbsp; [27]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "15:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "03:00 PM"&nbsp; }&nbsp; [28]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "15:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "03:15 PM"&nbsp; }&nbsp; [29]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "15:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "03:30 PM"&nbsp; }&nbsp; [30]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "15:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "03:45 PM"&nbsp; }&nbsp; [31]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "16:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "04:00 PM"&nbsp; }&nbsp; [32]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "16:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "04:15 PM"&nbsp; }&nbsp; [33]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "16:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "04:30 PM"&nbsp; }&nbsp; [34]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "16:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "04:45 PM"&nbsp; }&nbsp; [35]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "17:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "05:00 PM"&nbsp; }&nbsp; [36]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "17:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "05:15 PM"&nbsp; }&nbsp; [37]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "17:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "05:30 PM"&nbsp; }&nbsp; [38]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "17:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "05:45 PM"&nbsp; }&nbsp; [39]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "18:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "06:00 PM"&nbsp; }&nbsp; [40]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "18:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "06:15 PM"&nbsp; }&nbsp; [41]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "18:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "06:30 PM"&nbsp; }&nbsp; [42]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "18:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "06:45 PM"&nbsp; }&nbsp; [43]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "19:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "07:00 PM"&nbsp; }&nbsp; [44]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "19:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "07:15 PM"&nbsp; }&nbsp; [45]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "19:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "07:30 PM"&nbsp; }&nbsp; [46]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "19:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "07:45 PM"&nbsp; }&nbsp; [47]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "20:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:00 PM"&nbsp; }&nbsp; [48]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "20:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:15 PM"&nbsp; }&nbsp; [49]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "20:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:30 PM"&nbsp; }&nbsp; [50]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "20:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "08:45 PM"&nbsp; }&nbsp; [51]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "21:00"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:00 PM"&nbsp; }&nbsp; [52]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "21:15"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:15 PM"&nbsp; }&nbsp; [53]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "21:30"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:30 PM"&nbsp; }&nbsp; [54]=>&nbsp; array(2) {&nbsp; &nbsp; ["24format"]=>&nbsp; &nbsp; string(5) "21:45"&nbsp; &nbsp; ["12format"]=>&nbsp; &nbsp; string(8) "09:45 PM"&nbsp; }}