在 jQuery UI Datepicker 和 asp.net 日历上禁用自定义日期

Question

我正在尝试在 jQuery datepicker 和 asp 日历上阻止日期，例如标签值为“周六，周日”，所以我想阻止所有周六和周日<asp:Label ID="lblweekoff" runat="server" Font-Size="Medium" Font-Bold="true" ForeColor="Orange"><asp:TextBox ID="txtdate" class="form-control" autocomplete="off" CssClass="datepicker" runat="server"></asp:TextBox>我尝试使用 if else 条件来实现这一点，但它不起作用，<script type="text/javascript"> function jScript() {        $(document).ready(function () {         var lblweekoff = document.getElementById("lblweekoff");            if (lblweekoff.value == "Sat,Sun") {                $('.datepicker').datepicker({                    minDate: 0,                    dateFormat: "yy/mm/dd",                    changeMonth: true,                    changeYear: true,                    maxDate: 2020,                    yearRange: '2018:+' + new Date().getFullYear().toString(),                    beforeShowDay: function (date) {                    var day = date.getDay();                    return [(day != 0 && day != 6)];                    }                });            }            else {                $('.datepicker').datepicker({                    minDate: 0,                    dateFormat: "yy/mm/dd",                    changeMonth: true,                    changeYear: true,                    maxDate: 2020,                    yearRange: '2018:+' + new Date().getFullYear().toString()                });            }   } </script>

Answer 1

如果您想在 jQuery Datepicker 或 asp:Calendar 中禁用某些工作日，例如Sun或Mon或其他任何一周

或者

工作日的组合，例如Sun,Mon或Tue,Wed,Thu或 其他任何一周

只需将代码放入setDays函数中并将其放在您想要的位置即可。

1) jQuery UI Datepicker

var selecteddays = '';  //<= var lblweekoff = document.getElementById("lblweekoff");

        function setDays(days) {

            selecteddays = days;

            $(function () {

                $("#datepicker").datepicker({

                    dateFormat: 'mm/dd/yy',

                    inline: true,

                    beforeShowDay: highlightDays,

                });

            });

            function highlightDays(date) {

                var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

                var d = new Date(date);

                var dayName = days[d.getDay()];

                var selectedSplittedDays = selecteddays.split(',');

                for (var i = 0; i < selectedSplittedDays.length; i++) {

                    if (selectedSplittedDays[i] == dayName) {

                        return [false];

                    }

                }

                return [true];

            }

        }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <div>

        <input type="radio" name="radio1" onclick="setDays('Sun,Mon')" value="Sun,Mon" />Sun,Mon <br />

        <input type="radio" name="radio1" onclick="setDays('Mon,Tue')" value="Mon,Tue" />Mon,Tue <br />

        <input type="radio" name="radio1" onclick="setDays('Tue,Wed')" value="Tue,Wed" />Tue,Wed <br />

        <input type="radio" name="radio1" onclick="setDays('Wed,Thu')" value="Wed,Thu" />Wed,Thu <br />

        <input type="radio" name="radio1" onclick="setDays('Thu,Fri')" value="Thu,Fri" />Thu,Fri <br />

        <input type="radio" name="radio1" onclick="setDays('Fri,Sat')" value="Fri,Sat" />Fri,Sat <br />

        <input type="radio" name="radio1" onclick="setDays('Sat,Sun')" value="Sat,Sun" />Sat,Sun <br />

    </div>

    <br/>

    <div>

        Date:

        <input class="datepicker" type="text" id="datepicker" data-weekends="true">

    </div>

2) asp:Calendar

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

    if (e.Day.Date.DayOfWeek == DayOfWeek.Sunday || e.Day.Date.DayOfWeek == DayOfWeek.Monday)

    {

        e.Day.IsSelectable = false;

        e.Cell.BackColor = System.Drawing.Color.Black;

    }

    //Same for other days

}