stackoom
  简体   繁体   中英

Disable public holiday, and specific time range selected on calendar for every Saturday

 原文  2020-03-20 07:12:58  0   1    javascript

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. Another 5 days start from 8:30 am to 5:00 pm? 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>

1 answers

solution1
 0  2020-03-20 09:33:10

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

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Geting public holiday to json from google calendar API Angular Holiday calendar application public holiday in javascript disable date range in Joomla calendar Disable specific days in p:calendar? Disable Friday and Saturday In Datepicker get google calendar holiday nodejs JavaScript - How to get holiday list of a specific year using Google Calendar API? Specific day or holiday in materialize How to disable calendar from been selected in HTML
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM