Javascript 检查时间范围

我有这个会议区预订系统。为了设置区域预订的进入和退出时间，我使用了选择框

<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>

我想做的是使

onChange

事件并将其传递给

ajax

，以发出警报，提醒用户所选的时间范围是否已被占用

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

---

有人想帮我解决这个问题吗？

我不会给你完整的解决方案，只是给你一些解决问题所需的想法/步骤。 在选择更改函数时，您可以进行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
} 

然后，在您的成功中，只需检查响应是否为真，若为，则发出警告消息，用户已被占用，否则不会发生任何事情。

---

对于超时选择，您也可以这样做

我不会给你完整的解决方案，只会给你一些想法/步骤来解决它。 在选择更改函数时，您可以进行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
} 

然后，在您的成功中，只需检查响应是否为真，若为，则发出警告消息，用户已被占用，否则不会发生任何事情。

---

对于超时选择，您也可以这样做

向我们展示您的php代码和ajax调用。向我们展示您的php代码和ajax调用。如果预订在之前预订的时段之前开始，但在之前预订的时段/之后结束，该怎么办？是的，我说过他应该为超时时间做同样的事情。这意味着检查超时值是在获取的时间和超时之间。啊，重叠测试比这简单。如果预订在之前预订的时段之前开始，但在/之后结束呢？是的，我说过他应该对超时时间做同样的测试。这意味着检查timeout值是否在获取的timein和timeout之间。啊，重叠测试比这简单