禁用公共假期，并在每个星期六在日历上选择特定时间范围

Question

I'm new in coding and trying to create an online booking appointment, but I couldn't figure out how to disable the selected public holiday on Calendar.我是编码新手并尝试创建在线预订约会，但我不知道如何在日历上禁用选定的公共假期。 Moreover, how to make the specific time range dependent on the calendar day?此外，如何使特定时间范围依赖于日历日？

eg On every Saturday, the time range only starts from 8:30 am to 12:00 pm.例如，在每个星期六，时间范围仅从上午 8:30 到下午 12:00 开始。 Another 5 days start from 8:30 am to 5:00 pm?从早上 8:30 到下午 5:00 再过 5 天？ Appreciate if you can help me.如果你能帮助我，不胜感激。

My coding:我的编码：

<div class="md-form mb-0">
   <label>Preferred Date</label>
     <input type=text id="PreferedDate" name="PreferedDate" class="form-control">
</div>

<script>
    $(document).ready(function() { 
        $(function() { 
            $("#PreferedDate").datepicker({ 
                dateFormat: 'dd-mm-yy', 
                minDate: 1,
                beforeShowDay: my_check 
            }); 
        }); 

        function my_check(in_date) { 
            if (in_date.getDay() == 0) { 
                return [false, "notav", 'Not Available']; 
            } else { 
                return [true, "av", "available"]; 
            } 
        } 
    }) 
</script>

<div class="md-form mb-0">
   <label>Preferred Time</label>
        <select class="form-control" name="PreferedTime" id="time">

        <script>
            //coding here?
        </script>

        <option value="8:00 AM">8:00 AM</option>
        <option value="8:15 AM">8:15 AM</option>
        <option value="8:30 AM">8:30 AM</option>
        <option value="8:45 AM">8:45 AM</option>

        <option value="9:00 AM">9:00 AM</option>
        <option value="9:15 AM">9:15 AM</option>
        <option value="9:30 AM">9:30 AM</option>
        <option value="9:45 AM">9:45 AM</option>

        <option value="10:00 AM">10:00 AM</option>
        <option value="10:15 AM">10:15 AM</option>
        <option value="10:30 AM">10:30 AM</option>
        <option value="10:45 AM">10:45 AM</option>

        <option value="11:00 AM">11:00 AM</option>
        <option value="11:15 AM">11:15 AM</option>
        <option value="11:30 AM">11:30 AM</option>
        <option value="11:45 AM">11:45 AM</option>

        <option value="12:00 PM">12:00 PM</option>
        <option value="12:15 PM">12:15 PM</option>
        <option value="12:30 PM">12:30 PM</option>
        <option value="12:45 PM">12:45 PM</option>

        <option value="1:00 PM">1:00 PM</option>
        <option value="1:15 PM">1:15 PM</option>
        <option value="1:30 PM">1:30 PM</option>
        <option value="1:45 PM">1:45 PM</option>

        <option value="2:00 PM">2:00 PM</option>
        <option value="2:15 PM">2:15 PM</option>
        <option value="2:30 PM">2:30 PM</option>
        <option value="2:45 PM">2:45 PM</option>

        <option value="3:00 PM">3:00 PM</option>
        <option value="3:15 PM">3:15 PM</option>
        <option value="3:30 PM">3:30 PM</option>
        <option value="3:45 PM">3:45 PM</option>

        <option value="4:00 PM">4:00 PM</option>
        <option value="4:15 PM">4:15 PM</option>
        <option value="4:30 PM">4:30 PM</option>
        <option value="4:45 PM">4:45 PM</option>

        <option value="5:00 PM">5:00 PM</option>
        <option value="5:15 PM">5:15 PM</option>
        <option value="5:30 PM">5:30 PM</option>            
      </select>                                 
   </div>

Answer 1

So this code is for friday if you change the value of if as displayed in comments too you can fix it for your problem i hope it will help you !!!所以这段代码是星期五的，如果你改变评论中显示的 if 的值，你也可以解决你的问题，我希望它能帮助你！！！

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select id="abb"> <option value="8:00 AM">8:00 AM</option> <option value="8:15 AM">8:15 AM</option> <option value="8:30 AM">8:30 AM</option> <option value="8:45 AM">8:45 AM</option> <option value="9:00 AM">9:00 AM</option> <option value="9:15 AM">9:15 AM</option> <option value="9:30 AM">9:30 AM</option> <option value="9:45 AM">9:45 AM</option> <option value="10:00 AM">10:00 AM</option> <option value="10:15 AM">10:15 AM</option> <option value="10:30 AM">10:30 AM</option> <option value="10:45 AM">10:45 AM</option> <option value="11:00 AM">11:00 AM</option> <option value="11:15 AM">11:15 AM</option> <option value="11:30 AM">11:30 AM</option> <option value="11:45 AM">11:45 AM</option> <option value="12:00 PM">12:00 PM</option> <option value="12:15 PM">12:15 PM</option> <option value="12:30 PM">12:30 PM</option> <option value="12:45 PM">12:45 PM</option> <option value="1:00 PM">1:00 PM</option> <option value="1:15 PM">1:15 PM</option> <option value="1:30 PM">1:30 PM</option> <option value="1:45 PM">1:45 PM</option> <option value="2:00 PM">2:00 PM</option> <option value="2:15 PM">2:15 PM</option> <option value="2:30 PM">2:30 PM</option> <option value="2:45 PM">2:45 PM</option> <option value="3:00 PM">3:00 PM</option> <option value="3:15 PM">3:15 PM</option> <option value="3:30 PM">3:30 PM</option> <option value="3:45 PM">3:45 PM</option> <option value="4:00 PM">4:00 PM</option> <option value="4:15 PM">4:15 PM</option> <option value="4:30 PM">4:30 PM</option> <option value="4:45 PM">4:45 PM</option> <option value="5:00 PM">5:00 PM</option> <option value="5:15 PM">5:15 PM</option> <option value="5:30 PM">5:30 PM</option> </div> </select> <script> var d = new Date(); var n = d.getDay(); var abb = document.querySelector('#abb') console.log(n) if (n === 5) //5 is for friday, saturday =6 { for (let index = 0; index < abb.children.length; index++) { if (abb[index].value <= '12:00 PM' || abb[index].value >= '8:00 AM') abb[index].disabled = false else abb[index].disabled = true } } </script> </body> </html>

禁用公共假期，并在每个星期六在日历上选择特定时间范围

问题描述

1 个解决方案

解决方案1
0 2020-03-20 09:33:10

禁用公共假期，并在每个星期六在日历上选择特定时间范围

问题描述

1 个解决方案

解决方案1 0 2020-03-20 09:33:10

解决方案1
0 2020-03-20 09:33:10