如何为Ninja Forms的flatpickr日期选择器设置minDate禁用过往日期

你可以通过以下两种方式实现禁用Ninja Forms日期选择器的过去日期： #

方案1：全局JS配置（适配所有已更换flatpickr的Ninja Forms版本） #

将以下JS代码添加到WordPress站点的自定义脚本区块即可：

document.addEventListener('DOMContentLoaded', () => {
  nfRadio.channel('forms').on('before:renderField', field => {
    // 筛选所有日期类型字段
    if (field.get('type') === 'date') {
      const originalOpts = field.get('date_picker_options') || {}
      field.set('date_picker_options', {
        ...originalOpts,
        minDate: 'today' // flatpickr原生支持today关键字，自动识别当前日期
      })
    }
  })
})

• 如果你只需要给特定日期字段启用该规则，可以先在Ninja Forms后台对应字段的「高级」设置页，给字段添加自定义CSS类allow-future-only，再将上面的判断条件替换为：

  if (field.get('type') === 'date' && field.get('element_class').includes('allow-future-only'))
  

• 代码添加路径可选择：WordPress后台→外观→自定义→自定义代码→自定义JS，或子主题的JS脚本文件中，添加后清空站点缓存即可生效。

方案2：后台直接配置（适配V3.6及以上版本Ninja Forms） #

新版本Ninja Forms已经内置了日期范围设置项，无需写代码：

1. 进入对应表单的编辑页，点开目标日期字段的设置面板
2. 切换到「高级」选项卡，找到「最小日期」输入框
3. 直接输入today保存即可，插件会自动适配flatpickr的配置规则

注：配置完成后如果没有立即生效，请先清空浏览器缓存、站点缓存以及CDN缓存后再测试。

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