如何编写脚本限制Ninja Form日期选择器无法选择过去日期

实现原理 #

Ninja Forms的日期选择器默认基于jQuery UI Datepicker组件开发，仅需要给组件添加minDate参数即可实现日期选择范围限制，无需修改插件源码。

操作步骤 #

• 登录WordPress后台，进入「外观」-「自定义」-「自定义CSS/JS」板块，选择添加自定义JS
• 将下方代码粘贴到JS编辑框中，保存发布即可全局生效

jQuery(document).ready(function($) {
  // 监听Ninja Forms表单加载完成事件
  $(document).on('nfFormReady', function() {
    // 所有Ninja Forms日期选择器最小可选日期设为今天
    $('.nf-field-datepicker').datepicker('option', 'minDate', 0);
  });
});

• 若仅需要限制特定表单的日期字段，可将代码中的选择器.nf-field-datepicker替换为#nf-form-你的表单ID-cont .nf-field-datepicker，比如表单ID为3的情况下替换为#nf-form-3-cont .nf-field-datepicker

参数调整说明 #

• 代码中minDate: 0代表最小可选日期为当天，值为负数时代表允许选择今天之前的对应天数，比如minDate: -2允许选择今天及之前2天的日期
• 值为正数时代表最小可选日期为今天之后的对应天数，比如minDate: 2代表只能选择今天之后2天及更晚的日期

常见问题排查 #

• 代码添加后不生效：先清空站点缓存、CDN缓存和浏览器缓存后重试，若仍不生效可右键点击日期输入框选择「检查」，确认日期输入框的类名是否和代码中的.nf-field-datepicker一致，不一致的话替换为实际类名即可

内容的提问来源于stack exchange，提问作者Jana Lux