在 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 Datepickervar selecteddays = '';&nbsp; //<= var lblweekoff = document.getElementById("lblweekoff");&nbsp; &nbsp; &nbsp; &nbsp; function setDays(days) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selecteddays = days;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#datepicker").datepicker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat: 'mm/dd/yy',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inline: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beforeShowDay: highlightDays,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function highlightDays(date) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var d = new Date(date);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dayName = days[d.getDay()];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selectedSplittedDays = selecteddays.split(',');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < selectedSplittedDays.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (selectedSplittedDays[i] == dayName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return [false];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return [true];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-1.12.4.js"></script>&nbsp; &nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Sun,Mon')" value="Sun,Mon" />Sun,Mon <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Mon,Tue')" value="Mon,Tue" />Mon,Tue <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Tue,Wed')" value="Tue,Wed" />Tue,Wed <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Wed,Thu')" value="Wed,Thu" />Wed,Thu <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Thu,Fri')" value="Thu,Fri" />Thu,Fri <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Fri,Sat')" value="Fri,Sat" />Fri,Sat <br />&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" name="radio1" onclick="setDays('Sat,Sun')" value="Sat,Sun" />Sat,Sun <br />&nbsp; &nbsp; </div>&nbsp; &nbsp; <br/>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; Date:&nbsp; &nbsp; &nbsp; &nbsp; <input class="datepicker" type="text" id="datepicker" data-weekends="true">&nbsp; &nbsp; </div>2) asp:Calendarprotected void Calendar1_DayRender(object sender, DayRenderEventArgs e){&nbsp; &nbsp; if (e.Day.Date.DayOfWeek == DayOfWeek.Sunday || e.Day.Date.DayOfWeek == DayOfWeek.Monday)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; e.Day.IsSelectable = false;&nbsp; &nbsp; &nbsp; &nbsp; e.Cell.BackColor = System.Drawing.Color.Black;&nbsp; &nbsp; }&nbsp; &nbsp; //Same for other days}