如何通过屏幕数字键盘按钮实现文本框日期格式化（DD/MM/YYYY）

直接修改你的代码，实现点击数字按钮时自动格式化DD/MM/YYYY日期格式，同时修正原键盘中不合理的value="10"按钮为删除功能：

修改后的完整代码 #

HTML部分 #

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>

<body>
<input type="text" id="inputText" maxlength="10" placeholder="DD/MM/YYYY">
<div class="col mt-2">
  <button class="buttonsDigitalKeyboard" value="0"> 0 </button>
  <button class="buttonsDigitalKeyboard" value="1"> 1 </button>
  <button class="buttonsDigitalKeyboard" value="2"> 2 </button>
  <button class="buttonsDigitalKeyboard" value="3"> 3 </button>
  <button class="buttonsDigitalKeyboard" value="4"> 4 </button>
  <button class="buttonsDigitalKeyboard" value="5"> 5 </button>
  <button class="buttonsDigitalKeyboard" value="6"> 6 </button>
  <button class="buttonsDigitalKeyboard" value="7"> 7 </button>
  <button class="buttonsDigitalKeyboard" value="8"> 8 </button>
  <button class="buttonsDigitalKeyboard" value="9"> 9 </button>
  <button class="buttonsDigitalKeyboard" value="del"> 删除 </button>
</div>

JavaScript部分 #

$(document).ready(function () {
    const input = $("#inputText"); 
    $(".buttonsDigitalKeyboard").click(function () { 
        const btnValue = $(this).val();
        if (btnValue === "del") {
            // 删除最后一个字符（包含斜杠）
            const currentVal = input.val();
            input.val(currentVal.slice(0, -1));
            return;
        }
        // 处理数字输入并格式化
        updateDateInput(input, btnValue);
    });

    function updateDateInput(input, newDigit) {
        // 过滤现有值中的非数字字符，只保留纯数字
        let rawDigits = input.val().replace(/\D/g, '');
        // 添加新输入的数字
        rawDigits += newDigit;
        // 最多保留8位数字（对应DD/MM/YYYY的8位数字）
        rawDigits = rawDigits.slice(0, 8);
        
        // 格式化数字为DD/MM/YYYY格式
        let formatted = '';
        if (rawDigits.length >= 2) {
            formatted += rawDigits.slice(0, 2) + '/';
            if (rawDigits.length >= 4) {
                formatted += rawDigits.slice(2, 4) + '/';
                formatted += rawDigits.slice(4);
            } else {
                formatted += rawDigits.slice(2);
            }
        } else {
            formatted = rawDigits;
        }
        
        // 更新输入框内容
        input.val(formatted);
    }
});

核心逻辑说明 #

1. 删除功能修正：将原value="10"的按钮改为删除键，点击时移除输入框最后一个字符，符合日期输入的操作习惯。
2. 纯数字提取：每次处理输入前，先过滤掉现有值中的斜杠等非数字字符，避免重复添加分隔符。
3. 长度限制：最多保留8位数字，对应日期的日(2位)+月(2位)+年(4位)，防止无效输入。
4. 自动格式化：根据输入数字的长度自动插入斜杠：
   • 输入2位数字时，自动变为DD/
   • 输入4位数字时，自动变为DD/MM/
   • 输入超过4位时，后续数字自动填充到年份部分
5. 输入框长度限制：设置maxlength="10"，刚好匹配DD/MM/YYYY的总长度，避免内容溢出。

内容的提问来源于stack exchange，提问作者Paulo Paiva