jquery datepickerの日数をドロップダウン値に基づいて表示する

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.オプションの値は、 'Monday、' Tuesday、 'Wednesday'の代わりに '1'、 '2'、 '3' ....です。動的。 3. datepickerの日付変更時に日付フィルタを適用するための動的関数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>