Question

我是编码方面的新手，正在尝试创建在线预订约会，但是我不知道如何在Calendar上禁用选定的公共假期。此外，如何使特定时间范围取决于日历日？

例如在每个星期六，时间范围仅从上午8:30到下午12:00开始。另外5天是从上午8:30开始到下午5:00？感谢您能为我提供帮助。

我的编码：

<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

因此，如果您更改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 个答案: