Question

我有这个小提琴，使用datepicker只显示星期六。

我需要做的是提供一个功能来检查选择哪个选项进行传递，以及选择星期六是否仅在星号选择器上显示星期六。

如果选择了其他2个选项，则正常显示日历。

os

以下是显示所有日历日的代码：

$("#dp").datepicker({
  beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() 
== 6,""]}
});

Screenshot of the website

Answer 1

以下是您必须执行此功能的步骤。

触发单选按钮的点击事件
验证当前值
基于验证，显示正常的一个或仅显示星期六的一个。
在更新日期选择器之前，您必须销毁当前显示的日期选择器，以便在更改后显示更新的日期选择器。

<强> JS

$('input[name="test"]').on('click', function(){
    $("#dp").datepicker("destroy");
    if($(this).val() == "Saturday") {            
        $("#dp").datepicker({
           beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}
         });
    } else {
       $("#dp").datepicker();
    }
 });
 $("#dp").datepicker();

<强> HTML

 <div>
   <input type="radio" name="test" value="Standard" /> Standard
   <input type="radio" name="test" value="Express" /> Express
   <input type="radio" name="test" value="Saturday" /> Saturday
 </div>
 <input type="text" id="dp"/>

<强>段

$('input[name="test"]').on('click', function(){
   $("#dp").datepicker("destroy");
   if($(this).val() == "Saturday") {      
      $("#dp").datepicker({
        beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}
    });
  } else {
    $("#dp").datepicker();
  }
});
$("#dp").datepicker();

 article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  html { font-size: 90%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<div>
  <input type="radio" name="test" value="Standard" /> Standard
  <input type="radio" name="test" value="Express" /> Express
  <input type="radio" name="test" value="Saturday" /> Saturday
  </div>
  <input type="text" id="dp"/>

FIDDLE DEMO

Answer 2

这是一个简单的解决方案，它首先创建一个日期选择器，当单选按钮的值更改为星期六传递时，它将限制值，如示例中所示。此示例使用datepicker“选项”更改beforeShowDay函数，因此它重用实际的日期选择器。

它应该给你一些如何解决问题的想法。

$("#dp").datepicker();

$("input[type='radio']").change(function() {
  if (this.value === "saturday")
    $("#dp").datepicker("option", "beforeShowDay", function(date){ return [date.getDay() == 6,""]});
  else
    $("#dp").datepicker("option", "beforeShowDay", null);
});

 article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  html { font-size: 64.5%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">

<input type="radio" id="deliveryStandard" name="delivery" value="standard" checked>
<label for="deliveryStandard">Standard</label>

<input type="radio" id ="deliverySaturay" name="delivery" value="saturday">
<label for="deliverySaturay">Saturday</label>
    
<input type="text" id="dp"/>

jQuery函数 - 如果选择了星期六传递，请执行此操作

2 个答案: