javascript - 检查时间范围

Question

我有这个 session 区预订系统。为了设置区域保留的时间和超时，我有使用选择框

<div class="row">
                            <div class="col-md-4">
                                <div class="form-group"  >

                                    <select class="form-control" id="time_in" name="time_in">
                                        <option value=""></option>
                                        <option value="07:00">07:00</option>
                                        <option value="07:30">07:30</option>
                                        <option value="08:00">08:00</option>
                                        <option value="08:30">08:30</option>
                                        <option value="09:00">09:00</option>
                                        <option value="09:30">09:30</option>
                                        <option value="10:00">10:00</option>
                                        <option value="10:30">10:30</option>
                                        <option value="11:00">11:00</option>
                                        <option value="11:30">11:30</option>
                                        <option value="12:00">12:00</option>
                                        <option value="12:30">12:30</option>
                                        <option value="13:00">13:00</option>
                                        <option value="13:30">13:30</option>
                                        <option value="14:00">14:00</option>
                                        <option value="14:30">14:30</option>
                                        <option value="15:00">15:00</option>
                                        <option value="15:30">15:30</option>
                                        <option value="16:00">16:00</option>
                                        <option value="16:30">16:30</option>
                                        <option value="17:00">17:00</option>
                                        <option value="17:30">17:30</option>
                                        <option value="18:00">18:00</option>
                                    </select>

                                    <span class="select-arrow"></span>
                                    <span class="form-label">Time In</span>
                                </div>
                            </div>

                            <div class="col-md-4">

                                <div class="form-group">
                                    <select class="form-control" id="time_out" name="time_out">
                                        <option value=""></option>
                                        <option value="07:00">07:00</option>
                                        <option value="07:30">07:30</option>
                                        <option value="08:00">08:00</option>
                                        <option value="08:30">08:30</option>
                                        <option value="09:00">09:00</option>
                                        <option value="09:30">09:30</option>
                                        <option value="10:00">10:00</option>
                                        <option value="10:30">10:30</option>
                                        <option value="11:00">11:00</option>
                                        <option value="11:30">11:30</option>
                                        <option value="12:00">12:00</option>
                                        <option value="12:30">12:30</option>
                                        <option value="13:00">13:00</option>
                                        <option value="13:30">13:30</option>
                                        <option value="14:00">14:00</option>
                                        <option value="14:30">14:30</option>
                                        <option value="15:00">15:00</option>
                                        <option value="15:30">15:30</option>
                                        <option value="16:00">16:00</option>
                                        <option value="16:30">16:30</option>
                                        <option value="17:00">17:00</option>
                                        <option value="17:30">17:30</option>
                                        <option value="18:00">18:00</option>
                                    </select>

                                    <span class="select-arrow"></span>
                                    <span class="form-label">Time Out</span>

                                </div>
                            </div>

我的数据库表如下所示:

数据库名称:保留

id | emp_id | emp_name | local_no | meeting_area | time_in | time_out |
1     2335      jack       361        area 1         7:00     8:00

我想要的是制作 onChange 事件并将其传递给 ajax 以提醒用户选择的时间范围是否已被占用。

问题是我还是 php 的新手，所以我不知道该怎么做..

有人愿意帮我吗？

Answer 1

我不会为您提供完整的解决方案，只是您需要采取的一些想法/步骤来解决它。在选择更改功能时，您进行 Ajax 调用:

$("#time-in").change(function() {
var timeIn = $(this).children("option:selected").val();
 $.ajax({
   type: "POST",
   url: "url_to_your_php_method_that_will_handle_this_call",
   data: { 'timeIn': timeIn, 'empId':empId }, // you need somehow to get emp_id for one that you are checking 
   success: function(response){
     // Here you will handle response, that is show message if response does not satisfy condition
   }
});
});

在您的 php 文件中，您需要编写如下所示的逻辑:

if (!empty($_POST["timeIn"] && !empty($_POST["empId"] )) {
    // write query to get all reservations for employee
    // Loop through fetched reservations and check for each reservation if  $_POST["timeIn"] is between fetched time_in and time_out, find a answer how to compare times in php
    // if it is return true, if not return false
} 

然后在您的成功中只需检查响应是否为真，如果是则警告消息用户已经被占用，否则什么也不会发生。你会为超时选择做同样的事情。