只显示基于下拉列表中的日期在jquery datepicker

问题描述：

我想只启用那些日子，我从jquery datepicker下拉框中选择。它在页面加载时工作正常，但是当我动态地做同样的事情时，它不起作用。只显示基于下拉列表中的日期在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>

答

请检查下面的代码段。它确实如何你想要的。默认情况下，没有选择任何一天，因此所有星期几都被启用。在任何一天的选择中，仅当天将被启用，并且所有其他星期几将被禁用。

我在你的代码中做了下列修改。 1.添加了默认下拉选项 2.选项值为'1'，'2'，'3'....而不是文本'星期一'，'星期二'，'星期三'...为了使代码动态。 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>

只显示基于下拉列表中的日期在jquery datepicker

相关推荐