如何限制Datepicker输入框禁止输入字母？已尝试singleinputs=false无效

方法1：监听输入事件，过滤非法字符 #

直接给Datepicker绑定输入、按键和粘贴事件，只允许数字、日期分隔符（如-、/）以及退格、删除、方向键这类控制键，拦截字母和其他无效输入。

示例原生JS代码：

const dateInput = document.getElementById('your-datepicker-input-id');

// 拦截按键输入
dateInput.addEventListener('keydown', function(e) {
  const keyCode = e.keyCode || e.which;
  // 允许控制键：退格、删除、方向键
  const allowedControlKeys = [8, 46, 37, 38, 39, 40];
  // 允许的分隔符键码：-是189，/是191
  const allowedSeparatorKeys = [189, 191];

  // 拦截字母键
  if ((keyCode >= 65 && keyCode <= 90) && !e.ctrlKey && !e.metaKey) {
    e.preventDefault();
    return;
  }

  // 只允许数字、指定分隔符和控制键
  const inputChar = String.fromCharCode(keyCode);
  if (!/[\d]/.test(inputChar) && !allowedSeparatorKeys.includes(keyCode) && !allowedControlKeys.includes(keyCode)) {
    e.preventDefault();
  }
});

// 处理粘贴事件，过滤非法字符
dateInput.addEventListener('paste', function(e) {
  e.preventDefault();
  const clipboardText = e.clipboardData.getData('text');
  // 只保留数字和日期分隔符
  const cleanedText = clipboardText.replace(/[^0-9\-\/]/g, '');
  this.value += cleanedText;
});

方法2：针对jQuery UI Datepicker的只读限制 #

如果使用的是jQuery UI Datepicker，可以通过临时移除/添加readonly属性，既保证日期选择器能正常打开，又禁止手动输入：

$(function() {
  $("#your-datepicker-input-id").datepicker({
    beforeShow: function(input) {
      // 打开选择器时临时取消只读
      $(input).attr('readonly', false);
    },
    onClose: function(dateText, inst) {
      // 关闭选择器后设置只读
      $(inst.input).attr('readonly', true);
    }
  });
});

配合CSS优化只读状态的视觉表现：

#your-datepicker-input-id[readonly] {
  background-color: #f5f5f5;
  cursor: default;
}

方法3：HTML5 pattern属性辅助验证 #

给输入框添加pattern属性限制日期格式，配合title提示用户，作为前端验证的补充：

<input type="text" id="your-datepicker-input-id" pattern="\d{4}-\d{2}-\d{2}" title="请输入YYYY-MM-DD格式的日期">

关于singleinputs=false无效的说明 #

singleinputs是部分Datepicker库（如Bootstrap Datepicker多日期选择场景）的参数，作用是控制是否拆分多日期为单个输入框，和禁止手动输入字母无关，因此这个设置对你的问题不适用。

内容的提问来源于stack exchange，提问作者Apoorva Ravikanti