如何使用jQuery/JavaScript将24/05/2021转换为24/May/2021日期格式

实现逻辑 #

• 监听文本框的blur（失焦）事件
• 读取输入值，按/分割为日、月、年三个部分
• 校验日期格式与合法性，避免无效日期转换
• 将数字月份映射为英文全称后，重新拼接为dd/MMM/yyyy格式回填到文本框
• 如果需要适配其他分隔符（比如横杠、点），修改正则表达式的匹配规则即可

纯JavaScript实现代码 #

HTML部分：

<input type="text" id="dateInput" placeholder="输入日期格式：dd/mm/yyyy">

JS部分：

const dateInput = document.getElementById('dateInput');
// 月份全称映射表
const monthFullNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

dateInput.addEventListener('blur', function() {
  const inputVal = this.value.trim();
  // 匹配dd/mm/yyyy格式的正则
  const dateReg = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
  const matchRes = inputVal.match(dateReg);
  
  if (!matchRes) {
    // 格式不匹配可自行补充提示逻辑
    return;
  }

  const day = parseInt(matchRes[1], 10);
  const month = parseInt(matchRes[2], 10) - 1; // JS月份从0开始计数
  const year = parseInt(matchRes[3], 10);

  // 校验日期是否合法，排除2月30日这类无效日期
  const dateObj = new Date(year, month, day);
  if (dateObj.getFullYear() === year && dateObj.getMonth() === month && dateObj.getDate() === day) {
    this.value = `${day}/${monthFullNames[month]}/${year}`;
  }
})

jQuery版本实现代码 #

如果项目已引入jQuery，可使用简化写法：

const monthFullNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

$('#dateInput').on('blur', function() {
  const inputVal = $(this).val().trim();
  const dateReg = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
  const matchRes = inputVal.match(dateReg);
  
  if (!matchRes) return;

  const day = parseInt(matchRes[1], 10);
  const month = parseInt(matchRes[2], 10) - 1;
  const year = parseInt(matchRes[3], 10);

  const dateObj = new Date(year, month, day);
  if (dateObj.getFullYear() === year && dateObj.getMonth() === month && dateObj.getDate() === day) {
    $(this).val(`${day}/${monthFullNames[month]}/${year}`);
  }
})

内容的提问来源于stack exchange，提问作者Shubham Dange