如何配置YADCF/DataTables仅在日期合法时提交AJAX请求？

完全可以通过配置YADCF结合DataTables的事件拦截实现客户端日期校验，仅在日期合法时提交AJAX请求，具体实现如下：

1. 利用jQuery UI日期选择器内置校验拦截无效输入 #

在YADCF初始化时，通过datepicker_options配置日期选择器的onClose事件，实时校验输入框内容的合法性，无效则清空并提示：

yadcf.init(table, [
  {
    column_number: 2, // 替换为你的日期列索引
    filter_type: 'range_date',
    datepicker_type: 'jquery_ui',
    datepicker_options: {
      dateFormat: 'yy-mm-dd', // 匹配你的目标日期格式
      onClose: function(dateText, inst) {
        // 校验输入的日期格式
        var isValidDate = $.datepicker.parseDate('yy-mm-dd', dateText);
        if (!isValidDate && dateText !== '') {
          $(this).val('');
          alert('请输入合法的日期格式（YYYY-MM-DD）');
        }
      }
    }
  }
]);

2. 拦截DataTables请求，前置全局校验 #

通过DataTables的preXhr.dt事件，在AJAX请求发送前统一检查日期范围的合法性，无效则阻止请求：

$('#your-table-id').on('preXhr.dt', function(e, settings, data) {
  // 获取当前日期筛选器的取值
  var dateRange = yadcf.getFilterValByColumnNumber(table, 2);
  var startValid = true;
  var endValid = true;

  // 校验起始日期
  if (dateRange[0] !== '') {
    startValid = $.datepicker.parseDate('yy-mm-dd', dateRange[0]) !== null;
  }
  // 校验结束日期
  if (dateRange[1] !== '') {
    endValid = $.datepicker.parseDate('yy-mm-dd', dateRange[1]) !== null;
  }

  // 任一日期无效则取消请求
  if (!startValid || !endValid) {
    alert('请输入合法的日期范围');
    return false; // 返回false会终止AJAX请求发送
  }
});

3. 可选方案：禁用手动输入（彻底避免无效值） #

如果不需要用户手动输入日期，可直接将输入框设为只读，强制用户通过日期选择器选择：

yadcf.init(table, [
  {
    column_number: 2,
    filter_type: 'range_date',
    datepicker_type: 'jquery_ui',
    datepicker_options: {
      dateFormat: 'yy-mm-dd'
    },
    filter_container_id: 'date-filter-container' // 指定容器ID方便定位
  }
]);

// 初始化后设置输入框只读
$('#date-filter-container input').prop('readonly', true);

内容的提问来源于stack exchange，提问作者Matthew Hegarty