jQuery 功能 - 如果选择星期六送货，请执行此操作

Question

我有这个 fiddle，它使用日期选择器仅显示星期六。

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

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

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

Answer 1

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

触发单选按钮的 on-click 事件
验证当前值
根据验证，显示正常的一个或仅显示星期六的一个。
在更新date-picker之前，你必须销毁当前显示date-picker，这样它才会显示更改后的更新

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

这是一些简单的解决方案，它首先创建一个日期选择器，当单选按钮的值更改为星期六交货时，它将像您的示例中那样限制值。此示例使用日期选择器 "option" 更改 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 功能 - 如果选择星期六送货，请执行此操作

jQuery function - if Saturday delivery is selected do this

jquery

function

datepicker

uidatepicker