Zeige Tage in jquery datepicker basierend auf Dropdown-Wert

Question

Ich möchte nur die Tage aktivieren, die ich aus der Dropdown-Box in jquery datepicker ausgewählt habe. Es funktioniert gut beim Laden der Seite, aber wenn ich dasselbe dynamisch mache, funktioniert es nicht.

<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

Bitte überprüfen Sie das folgende Snippet. Es tut genau wie du willst. Standardmäßig ist kein Tag ausgewählt, daher sind alle Wochentage aktiviert. Bei Auswahl eines beliebigen Tages wird nur dieser Tag aktiviert und alle anderen Wochentage werden deaktiviert.

Ich habe folgende Änderungen in Ihrem Code vorgenommen. 1. Eine Standard-Dropdown-Option hinzugefügt 2. Option Werte sind '1', '2', '3' .... anstelle von Text 'Montag', 'Dienstag', 'Mittwoch' ... Um den Code zu machen dynamisch. 3. Erstellen Sie eine dynamische Funktion filterDate, um das Datum nach Tagesänderung für den Datepicker zu filtern.

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