如何在WordPress Contact Form 7中实现DD/MM格式日期自动格式化输入

1. 修改Contact Form7输入框代码 #

把原输入框的type="number"改为type="text"——数字类型输入框会自动过滤非数字字符，无法插入斜杠；保留inputmode="numeric"确保移动端弹出数字键盘，同时调整占位符和最大长度：

<input type="text" id="birthday" name="birthday" class="birthday" placeholder="DD/MM" inputmode="numeric" maxlength="5">

2. 编写实时格式化的JavaScript逻辑 #

可以把这段代码添加到主题的functions.php（通过wp_enqueue_script），或者直接在CF7的表单页面自定义脚本区域插入：

document.addEventListener('DOMContentLoaded', function() {
  const birthdayInput = document.getElementById('birthday');
  
  birthdayInput.addEventListener('input', function(e) {
    // 过滤所有非数字字符
    let cleanValue = e.target.value.replace(/\D/g, '');
    // 输入到第2位数字时自动添加斜杠
    if (cleanValue.length > 2) {
      cleanValue = `${cleanValue.slice(0,2)}/${cleanValue.slice(2,4)}`;
    }
    e.target.value = cleanValue;
  });

  // 优化删除操作的交互
  birthdayInput.addEventListener('keydown', function(e) {
    // 光标停在斜杠位置时，按删除键直接跳过斜杠
    if (e.key === 'Backspace' && e.target.selectionStart === 3 && e.target.selectionEnd === 3) {
      e.preventDefault();
      e.target.setSelectionRange(2, 2);
    }
  });
});

3. 后端验证（可选但推荐） #

为了确保提交数据符合格式要求，在CF7的「附加设置」里添加验证规则：

birthday:required|regexp:^\d{2}/\d{2}$
birthday* Please enter a valid date in DD/MM format.

核心思路说明 #

• 放弃type="number"：数字输入框的特性限制了非数字字符的输入，无法实现自动插入斜杠的效果，改用text类型配合inputmode="numeric"兼顾输入体验和格式化需求。
• 实时过滤+格式化：先清除所有非数字内容，再根据输入长度自动拼接斜杠，确保输入过程中格式始终规范。
• 优化删除交互：避免用户删除斜杠时出现格式混乱，提升操作流畅度。

内容的提问来源于stack exchange，提问作者Vikas Singh