如何实现input type date输入格式统一为01-mar-23格式？

需求：无论用户输入数字月份格式的日期（如01-03-23），最终需将日期统一转换为DD-MMM-YY格式（示例：01-mar-23）。

完整实现代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date-input" required />
<button id="submit">Submit</button>

jQuery 处理代码

(function() {
    // 定义英文月份缩写数组
    const monthAbbrs = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
    
    // 补零函数：小于10的数字前面加0
    function padZero(num) {
        return num < 10 ? `0${num}` : num.toString();
    }

    $('#submit').on('click', function(){
        var date = new Date($('#date-input').val());
        // 处理有效日期
        if (!isNaN(date.getTime())) {
            const day = padZero(date.getDate());
            const month = monthAbbrs[date.getMonth()];
            const year = date.getFullYear().toString().slice(-2); // 取年份后两位
            const formattedDate = `${day}-${month}-${year}`;
            alert(formattedDate);
            // 这里可替换为后续处理逻辑，如赋值给隐藏域或提交到后台
        } else {
            alert('请输入有效的日期');
        }
    });
})();

关键说明 #

• 月份缩写映射：通过预定义的monthAbbrs数组，将日期对象返回的数字月份（0-11）对应到英文小写缩写。
• 补零处理：使用padZero函数确保日期数字始终为两位格式（如1转为01）。
• 年份截取：通过slice(-2)获取年份的后两位，匹配示例格式要求。
• 有效性校验：通过isNaN(date.getTime())判断用户输入的日期是否有效，避免无效日期引发错误。

内容的提问来源于stack exchange，提问作者Ronit B