Datatables日期范围过滤失效及日期选择器西语本地化咨询

日期范围筛选不生效问题 #

故障原因 #

• 日期格式配置不匹配：业务实际使用DD MM YYYY日期格式，但初始化DateTime组件时配置的格式为Do MMMM YYYY，组件取值和实际数据格式无法对齐
• 日期解析逻辑错误：JS原生new Date()无法正确解析日在前、月在后的DD MM YYYY字符串，会生成无效日期对象，所有大小比较逻辑都会失效
• 空值判断逻辑错误：未选择日期时，DateTime组件返回的是undefined/空字符串，而非null，原有=== null的判断无法命中无筛选条件的分支，导致无日期选择时也会错误过滤数据

修复代码 #

替换原有自定义搜索和DateTime初始化部分的代码，其余原有DataTable配置保持不变即可：

var minDate, maxDate;
// 自定义DD MM YYYY格式日期解析函数，避免原生Date解析错误
var parseDate = function(dateStr) {
  if (!dateStr) return null;
  var parts = dateStr.trim().split(' ');
  // 按DD MM YYYY拆分：日、月、年，月份从0开始计数所以减1
  var day = parseInt(parts[0], 10);
  var month = parseInt(parts[1], 10) - 1;
  var year = parseInt(parts[2], 10);
  return new Date(year, month, day);
}

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var min = minDate.val();
    var max = maxDate.val();
    var date = parseDate(data[0]);

    // 修正空值判断逻辑
    if (
      ( !min && !max ) ||
      ( !min && date <= max ) ||
      ( min <= date && !max ) ||
      ( min <= date && date <= max )
    ) {
      return true;
    }
    return false;
  }
);

$(document).ready(function () {
  // 修正DateTime格式配置，和业务DD MM YYYY对齐
  minDate = new DateTime($('#min'), {
    format: 'DD MM YYYY'
  });
  maxDate = new DateTime($('#max'), {
    format: 'DD MM YYYY'
  });

  // 此处保留原有DataTable初始化、列筛选、按钮等全部配置

  $('#min, #max').on('change', function () {
    table.draw();
  });
});

日期选择器西班牙语本地化 #

DataTables主表的西语语言包不会自动生效到DateTime组件，无需引入额外外部资源，直接在初始化DateTime时传入西语i18n配置即可，配置完成后日期选择器的所有文案都会切换为西班牙语，和现有Datatables的西语本地化保持一致：

var esDateTimeI18n = {
  months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  weekdays: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
  today: 'Hoy',
  clear: 'Limpiar',
  close: 'Cerrar',
  selectMonth: 'Seleccionar mes',
  previousMonth: 'Mes anterior',
  nextMonth: 'Mes siguiente',
  selectYear: 'Seleccionar año',
  previousYear: 'Año anterior',
  nextYear: 'Año siguiente',
  selectDecade: 'Seleccionar década',
  previousDecade: 'Década anterior',
  nextDecade: 'Década siguiente',
  previousCentury: 'Siglo anterior',
  nextCentury: 'Siglo siguiente'
}

// 初始化时传入i18n配置
minDate = new DateTime($('#min'), {
  format: 'DD MM YYYY',
  i18n: esDateTimeI18n
});
maxDate = new DateTime($('#max'), {
  format: 'DD MM YYYY',
  i18n: esDateTimeI18n
});

内容的提问来源于stack exchange，提问作者Francisco S