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

Posted 2023-05-09

【中文标题】根据复选框值操作日期选择器天数

【英文标题】：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,
);
);
);

【参考方案1】：

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

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