根据复选框值操作日期选择器天数答案

【问题标题】：Manipulate datepicker days based on checkbox value根据复选框值操作日期选择器天数
【发布时间】：2021-03-28 06:17:55
【问题描述】：

首先对不起我的英语。

我想根据复选框值更改日期选择器的可用天数。我正在使用联系表单 7 和 jQuery.ui，文本字段正确初始化日期选择器，但我无法根据复选框的值对其进行更改。

我在表格上有 5 个复选框，它们是客户工作的物理场所，您可以直接从他的位置订购东西和取货（为了清楚起见，食品卡车），然后选择一个日期。我想要实现的是根据复选框隐藏星期几，例如：

复选框 = 地点 A（仅限星期一）
复选框 = 地点 B（仅限周五）

等等。

到目前为止我所拥有的：

//I will be more specific with the selector as soon as I get it to work 

jQuery("input[type=checkbox]").on('click', function () {
     cVal = jQuery(this).val();
});

jQuery(function(){
 jQuery(".cf7date").datepicker({
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0 && day != 6),  ''];

    }
});
});

这将删除周六和周日，并且工作正常我可以获得单击复选框的值，但无论我尝试什么，如果包裹在 if/switch 中以检查复选框值并输出不同的日期，日期选择器将停止工作。

我有点困惑如何在点击函数之外传递“cVal”变量

编辑：看起来我找到了解决方法，现在正在工作只是为了让您知道

jQuery(function(){
var cVal;
jQuery("input[name='checkbox_luogo']").on('click', function () {
   cVal = jQuery(this).val();
   console.log(cVal);
});
function returnDays(date){
  var day = date.getDay();
  if(cVal == 'x'){
  return [(day != 0 && day != 6 && day != 5 && day != 4 && day != 3 && day != 2),  ''];
  }else if(cVal == 'y'){
        return [(day != 1 && day != 6 && day != 5 && day != 4),  ''];//Random stuff to test if it's working, not the final code
  }
}


jQuery(function(){
 jQuery(".cf7date").datepicker({
    beforeShowDay: returnDays,
});
});
});

【问题讨论】：

标签： jquery wordpress checkbox datepicker contact-form-7

【解决方案1】：

我还没有在 jquery UI 的文档中看到动态禁用天数的优雅方法。一种解决方法是为用户提供信息和自定义验证。您可以让表单拒绝某些单选和日期输入组合。

我在repl.it 中有一个正在运行的示例

【讨论】：