Question

如果从下拉列表中选择的时间范围介于当前时间之间，则需要显示错误消息。

我有一个datepicker和交货时间。对于交货时间我给了一些时间范围，如10-1,1-4,4-7,7-10。如果用户选择今天的日期和时间为1- 4然后它应该显示一个验证消息，例如时隙不可用。

日期选择器：

<div><label class="delivery_date_label">' . __( "Delivery Date" ) . ': </label>

            <input type="text" id="delivery_calender_lite" name="delivery_calender_lite" class="delivery_calender_lite" style="cursor: text!important;margin-bottom:10px;" readonly/>
  </div>

Timepicker：

<div><label class="delivery-hours">' . __( "Delivery Time" ) . ': </label>
                <select id="delivery-hours" class="delivery-hours" name="delivery_hour" >
                    <option value="">'.__("Choose an hour").'</option>
                    <option value="10am-1pm">10AM-1PM</option>
                    <option value="1pm-4pm">1PM-4PM</option>
                    <option value="4pm-7pm">4PM-7PM</option>
                    <option value="7pm-10pm">7PM-10PM</option>

                </select>
                </div>

Answer 1

尝试这个我认为这会奏效。但是你必须使用jQuery。我已经在其中使用了bootstrap date picker，但我认为它也适用于你的插件.cheers ..！

<强> JsFiddle

Answer 2

我在这里给出了我之前的解决方案check this。但是您需要将选择下拉值转换为小时并与当前时间进行比较！如果您提供有关插件的更多详细信息，将有助于解决它。

Answer 3

我在这里给出完整的解决方案。看看这个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="validDate()">
    <div class="form-group">
      <p>Date<span>*</span></p>
      <input type="date" name="date" id="date" class="form-control input-sm " required />
    </div>
    <div>
      <div>
        <label id="time" class="delivery-hours">Delivery Time</label>
                <select id="delivery-hours" class="delivery-hours" name="delivery_hour" >
                    <option value="">Choose an hour</option>
                    <option value="10am-1pm">10AM-1PM</option>
                    <option value="1pm-4pm">1PM-4PM</option>
                    <option value="4pm-7pm">4PM-7PM</option>
                    <option value="7pm-10pm">7PM-10PM</option>

                </select>
                </div>
    </div>
    <script>
        function validDate(){
            var today = new Date().toISOString().split('T')[0];
            document.getElementsByName("date")[0].setAttribute('min', today);
        }

        $(document).ready(function(){
            $("#delivery-hours").on("change",function(e){
                var userdate = new Date($("#date").val());              
                var currentDate = new Date();
                var userdateString = userdate.getFullYear() +"-"+(userdate.getMonth()+1)+"-"+userdate.getDate();
                var currentDateString = currentDate.getFullYear() +"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate();
                if(userdateString == currentDateString){
                    var userTime = $("#delivery-hours").val().split("-");   
                    var minTime = parseInt(userTime[0].replace ( /[^\d.]/g, '' ));
                    var maxTime = parseInt(userTime[1].replace ( /[^\d.]/g, '' ));
                    if(userTime[0].indexOf("pm") >=1 ){
                        minTime = minTime + 12;
                    }
                    if(userTime[1].indexOf("pm") >= 1){
                        maxTime = maxTime + 12;
                    }               
                    if(currentDate.getHours() >  minTime && currentDate.getHours() > maxTime)
                        alert("slot not avilable");
                }
            });
        });
    </script>   
</body>

如果选择的时间介于使用jquery的下拉列表中给出的时间范围之间，则显示错误消息

3 个答案: