jQuery XDSoft datetimepicker插件键盘无障碍问题：无法用键盘选日期

你当前的代码存在格式兼容、未利用插件原生能力等问题，以下是优化后的实现方案：

1. 开启插件原生键盘导航 #

该插件内置了键盘导航功能，初始化时开启keyboardNavigation选项，就能直接支持Tab键切换日期/时间的各个分段（年、月、日、时、分等），以及箭头键调整对应数值：

jQuery(document).ready(function() {
  'use strict';
  $('#filter-date').datetimepicker({
    keyboardNavigation: true, // 启用插件原生键盘导航
    format: 'Y-m-d H:i:s' // 配置与插件匹配的日期格式，可按需修改
  });
});

2. 自定义左右箭头键的整日期增减逻辑 #

如果需要用左右箭头直接增减完整日期（而非单个分段数值），可以结合插件的getDate和setDateAPI实现，避免手动解析日期字符串的兼容性问题：

jQuery(document).ready(function() {
  'use strict';
  const $datePicker = $('#filter-date').datetimepicker({
    keyboardNavigation: true,
    format: 'Y-m-d H:i:s'
  });

  $datePicker.on('keydown', function(e) {
    const pickerInstance = $(this).data('xdsoft_datetimepicker');
    const currentDate = pickerInstance.getDate();

    // 左箭头：日期减1天
    if (e.keyCode === 37) {
      e.preventDefault(); // 阻止浏览器默认光标左移行为
      currentDate.setDate(currentDate.getDate() - 1);
      pickerInstance.setDate(currentDate);
    } 
    // 右箭头：日期加1天
    else if (e.keyCode === 39) {
      e.preventDefault();
      currentDate.setDate(currentDate.getDate() + 1);
      pickerInstance.setDate(currentDate);
    }
  });
});

关键说明 #

• 开启keyboardNavigation后，Tab键可在年、月、日、时、分等分段间切换，上下箭头可调整当前选中分段的数值。
• 使用插件官方API操作日期，能保证与插件格式完全兼容，避免手动解析字符串导致的错误。
• 调用e.preventDefault()可避免浏览器默认按键行为（如光标移动）干扰插件逻辑。

内容的提问来源于stack exchange，提问作者Shaktidhar Giri