选择开始时间和结束时间之间的小时数会发出警报，而不管选择什么

我们的应用程序具有时间范围，开始时间和结束时间。

用户必须至少选择4个小时才能允许他们继续处理他们的请求。

到目前为止，用户选择在什么时间范围内都不会发出警报。

例如，如果用户选择开始时间为07:00:00和结束时间为12:00:00，则不应发出警报，并且用户应继续处理其余的请求。

有什么想法需要用下面的代码更改吗？

在此先多谢

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/datePicker.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script> 


  <script type='text/javascript'>//<![CDATA[
       $(window).load(function () {
           //Attach click event to button
           $('#Button1').on('click', function () {
               //Get Values from dropdownlist
               var sHour = $('#startHour').val(),
                eHour = $('#endHour').val();

               //create date format from dropdownlist selected values 
               var theDate = $('#<%= txtDate.ClientID%>').val();
               var timeStart = new Date(theDate + sHour).getHours();
               var timeEnd = new Date(theDate + eHour).getHours();

               //Calulate the time difference
               var hourDiff = timeEnd - timeStart;

               //Check if hour difference is less than 4 hours and show the message accordingly
               if (hourDiff < 4) {
                   alert("A mininum of 4 hours is required!");
               }
           });
       });//]]>  

</script>
                       <td align="right">
                        <span id="lblDate">Date</span>
                       </td>
                       <td align="left">
                        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
                        <br />
                       </td>
                       <td align="right">
                        <span id="lblStarTime">Start Time</span>
                       </td>
                       <td align="left">
                       <asp:DropDownList id="startHour" runat="server">
                        <asp:ListItem Value="07:00:00">07</asp:ListItem>
                        <asp:ListItem Value="08:00:00">08</asp:ListItem>
                        <asp:ListItem Value="09:00:00">09</asp:ListItem>
                        <asp:ListItem Value="10:00:00">10</asp:ListItem>
                        <asp:ListItem Value="11:00:00">11</asp:ListItem>
                        <asp:ListItem Selected="True" Value="00:00:00">12</asp:ListItem>
                        <asp:ListItem Value="01:00:00">01</asp:ListItem>
                        <asp:ListItem Value="02:00:00">02</asp:ListItem>
                        <asp:ListItem Value="03:00:00">03</asp:ListItem>
                        <asp:ListItem Value="04:00:00">04</asp:ListItem>
                        <asp:ListItem Value="05:00:00">05</asp:ListItem>
                        <asp:ListItem Value="06:00:00">06</asp:ListItem>
                       </asp:DropDownList>

                        <asp:DropDownList id="startMinutes" runat="server">
                 <asp:ListItem Value="00">00</asp:ListItem>
                         <asp:ListItem Value="15">15</asp:ListItem>
                         <asp:ListItem Value="30">30</asp:ListItem>
                         <asp:ListItem Value="45">45</asp:ListItem>
                    </asp:DropDownList>

                       <asp:DropDownList id="startAmPm" runat="server">
                 <asp:ListItem Value="AM">AM</asp:ListItem>
                 <asp:ListItem Value="PM">PM</asp:ListItem>
                       </asp:DropDownList>
                      </td>
                     </tr>
                     <tr>
                      <td align="right">
                       <span id="lbEndTime">End Time</span>
                      </td>
                      <td align="left">
                       <asp:DropDownList id="endHour" runat="server">
                        <asp:ListItem Value="07:00:00">07</asp:ListItem>
                        <asp:ListItem Value="08:00:00">08</asp:ListItem>
                        <asp:ListItem Value="09:00:00">09</asp:ListItem>
                        <asp:ListItem Value="10:00:00">10</asp:ListItem>
                        <asp:ListItem Value="11:00:00">11</asp:ListItem>
                        <asp:ListItem Selected="True" Value="00:00:00">12</asp:ListItem>
                        <asp:ListItem Value="01:00:00">01</asp:ListItem>
                        <asp:ListItem Value="02:00:00">02</asp:ListItem>
                        <asp:ListItem Value="03:00:00">03</asp:ListItem>
                        <asp:ListItem Value="04:00:00">04</asp:ListItem>
                        <asp:ListItem Value="05:00:00">05</asp:ListItem>
                        <asp:ListItem Value="06:00:00">06</asp:ListItem>
                       </asp:DropDownList>

                       <asp:DropDownList id="endMinutes" runat="server">
                 <asp:ListItem Value="00">00</asp:ListItem>
                         <asp:ListItem Value="15">15</asp:ListItem>
                         <asp:ListItem Value="30">30</asp:ListItem>
                         <asp:ListItem Value="45">45</asp:ListItem>
                    </asp:DropDownList>

                       <asp:DropDownList id="endAmPm" runat="server">
                 <asp:ListItem Value="AM">AM</asp:ListItem>
                 <asp:ListItem Value="PM">PM</asp:ListItem>
                       </asp:DropDownList>
                      </td>
                     </tr>
                    </div>
                   </table>

                    <asp:Button ID="Button1" runat="server" Text="Button" />