Question

我想只启用从jquery datepicker的下拉框中选择的那些日子。它在页面加载时工作正常，但是当我动态地执行相同的操作时，它无法正常工作。

<input type="text" name="txtstart_date" class="input-text datepickerwidth required" 
       id="txtstart_date" placeholder="Start Date*"/>
<select onchange="test()" id="drop1">
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
</select>

<script>
    $(document).ready(function ()
    {
        $("#txtstart_date").datepicker
        ({
            minDate:"dateToday",
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function (selectedDate) {
                $("#txtend_date").datepicker("option", "minDate", selectedDate);
            }
        });
    });
    function test()
    {
        var str=$( "#drop1 option:selected" ).text();
        if(str==="Monday")
        {
            $("#txtstart_date").datepicker({
                beforeShowDay: function(date) {
                    return [date.getDay() == 1];
                }
            });
        }
        if(str==="Tuesday")
        {
            $("#txtstart_date").datepicker({
                beforeShowDay: function(date) {
                    return [date.getDay() == 2];
                }
            });
        }
    }
</script>

Answer 1

请查看下面的代码段。它完全符合你的要求。默认情况下，未选择任何日期，因此启用了星期几的所有日期。在选择任何一天时，仅启用当天，并且将禁用所有其他工作日。

我在您的代码中进行了以下更改。 1.添加了默认下拉选项 2.选项值为'1'，'2'，'3'....而不是文本'Monday'，'Tuesday'，'Wednesday'...使代码动态化。 3.创建一个动态函数filterDate，使日期过滤器的日期过滤日期过滤。

$(document).ready(function ()
    {
        //datepicker
        $("#txtstart_date").datepicker
        ({
            minDate:"dateToday",
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function (selectedDate) {
                $("#txtend_date").datepicker("option", "minDate", selectedDate);
            },
            //Code to disable dates according to selection
            beforeShowDay: filterDate
        });
    });
    //By default no day selected in dropdown. So all the days will be displayed.
    var str=0;
    //Filterdate function to make the days enable/disable based on the selection.
    var filterDate = function(date) {
        if(str=='0'){
          return [true];
        }else{          
          return [date.getDay() == str];
        }
    };
    //Dropdown onchange function to set latest selection of dropdown.
    function test()
    {        
        str=$( "#drop1" ).val();
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="txtstart_date" class="input-text datepickerwidth required" 
       id="txtstart_date" placeholder="Start Date*"/>
<select onchange="test()" id="drop1">
    <option value="0">Select Day</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
</select>

根据下拉值

1 个答案: