Juned Ansari Juned Ansari - 4 months ago 35
Javascript Question

Show only days in jquery datepicker based on dropdown value

I want to enable only those days which I selected from dropdown box in jquery datepicker. It works fine at the time of page load, but when I do the same thing dynamically it is not working.

<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

Please check below snippet. It does exactly how you want. By default no day selected so all the days of week are enabled. On select of any day only that day will be enabled and all other week days will be disabled.

I have made following changes in your code. 1. Added a default dropdown option 2. Option values are '1','2','3'.... instead of text 'Monday','Tuesday','Wednesday'... To make the code dynamic. 3. Created a dynamic function filterDate to make the date filtered on day change for the datepicker.

$(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>