jQuery 函数 - 如果选择周六交货，请执行此操作答案

【问题标题】：jQuery function - if Saturday delivery is selected do thisjQuery 函数 - 如果选择周六交货，请执行此操作
【发布时间】：2018-07-29 11:27:02
【问题描述】：

我有这个小提琴，它使用日期选择器只显示星期六。

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

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

http://jsfiddle.net/X325G/519/

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

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

jQuery("#date").datepicker( { 
  minDate: +1, 
  maxDate: '+2M',
  beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0), ''];
  } 

});

Screenshot of the website

【问题讨论】：

我猜您希望在选择周六送货时有不同的日历选项？您应该创建一个包含至少 2 个单选按钮的示例，并在它们上应用更改侦听器以显示不同的日历或更改选项。你试过吗？另请注意，日历只是选择日期的一种可选方式，如果您不限制，用户仍然可以键入他们想要的任何日期。
我一直在尝试做类似的事情，但我的尝试失败了。我的jquery知识不是太先进。如果您可以发布一个非常有用的示例。谢谢

标签： jquery function datepicker uidatepicker

【解决方案1】：

这是实现此功能所必须执行的步骤。

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

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

【讨论】：

【解决方案2】：

这是一些简单的解决方案，它首先创建一个日期选择器，当单选按钮的值更改为星期六交付时，它将限制值，如您的示例中所示。此示例使用日期选择器“选项”来更改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"/>

【讨论】：