JavaScript日期格式化与多样化字符串解析指南（mm/dd/yyyy）

// 创建一个默认的en-US格式化器
const defaultDateFormatter = new Intl.DateTimeFormat('en-US');
console.log(defaultDateFormatter.format(new Date())); // 示例输出: 1/2/2024 (具体日期取决于运行时间)

// 指定mm/dd/yyyy格式，需要使用2-digit选项
const usDateFormatter = new Intl.DateTimeFormat('en-US', {
  month: '2-digit', // 月份两位数显示，不足补零
  day: '2-digit',   // 日期两位数显示，不足补零
  year: 'numeric'   // 完整的年份
});
console.log(usDateFormatter.format(new Date())); // 示例输出: 01/02/2024

// 默认的en-US格式化
console.log(new Date().toLocaleDateString('en-US')); // 示例输出: 1/2/2024

// 指定mm/dd/yyyy格式
console.log(new Date().toLocaleDateString('en-US', {
  month: '2-digit',
  day: '2-digit',
  year: 'numeric'
})); // 示例输出: 01/02/2024

const usDateFormatter = new Intl.DateTimeFormat('en-US', {
  month: '2-digit',
  day: '2-digit',
  year: 'numeric'
});

/**
 * 解析日期字符串并返回一个Date对象，日期默认为每月1号。
 * 支持 "M YYYY" (如 "6 2023") 和 "MonthName YYYY" (如 "June 2023") 格式。
 * @param {string} dateStr - 待解析的日期字符串。
 * @returns {Date} 解析后的Date对象。
 * @throws {Error} 如果日期格式非法。
 */
const parseDate = (dateStr) => {
  const tokens = dateStr.split(/\s/g); // 根据空格分割字符串
  if (tokens.length !== 2) {
    throw new Error(`非法日期格式: ${dateStr}`);
  }

  const [monthToken, yearToken] = tokens;
  const year = +yearToken; // 将年份转换为数字

  let monthIndex;
  // 判断月份是数字还是月份名称
  if (!isNaN(monthToken)) {
    // 数字月份 (例如 "6")，需要减1因为Date对象的月份是0-11
    monthIndex = +monthToken - 1;
  } else {
    // 月份名称 (例如 "June")
    // Date.parse 可以处理 "MonthName 1, YYYY" 格式
    const dateParsed = Date.parse(`${monthToken} 1, ${yearToken}`);
    if (isNaN(dateParsed)) {
      throw new Error(`无法识别的月份名称或非法日期: ${dateStr}`);
    }
    return new Date(dateParsed); // 直接返回解析后的Date对象
  }

  // 对于数字月份，构造Date对象，日期固定为1
  return new Date(year, monthIndex, 1);
};

// 结合解析和格式化
['6 2023', 'June 2023', 'foobar'].forEach((dateStr) => {
  try {
    console.log(`输入: "${dateStr}" -> 输出: ${usDateFormatter.format(parseDate(dateStr))}`);
  } catch (e) {
    console.log(`输入: "${dateStr}" -> 错误: ${e.message}`);
  }
});
/* 预期输出:
输入: "6 2023" -> 输出: 06/01/2023
输入: "June 2023" -> 输出: 06/01/2023
输入: "foobar" -> 错误: 非法日期格式: foobar
*/

/**
 * 获取指定区域设置下的月份名称数组。
 * @param {string} locale - 区域设置，例如 'en-US'。
 * @param {string} format - 月份名称格式，例如 'long' (完整名称) 或 'short' (缩写)。
 * @returns {string[]} 包含12个月份名称的数组。
 */
const getLocalMonthNames = (locale = 'default', format = 'long') =>
  Array.from({ length: 12 }, (_, monthIndex) =>
    new Date(0, monthIndex, 1).toLocaleString(locale, { month: format }));

// 预先生成en-US区域的月份名称，例如 ["January", "February", ...]
const monthNames = getLocalMonthNames('en-US');

const usDateFormatter = new Intl.DateTimeFormat('en-US', {
  month: '2-digit',
  day: '2-digit',
  year: 'numeric'
});

/**
 * 优化后的日期解析函数。
 * @param {string} dateStr - 待解析的日期字符串。
 * @returns {Date} 解析后的Date对象。
 * @throws {Error} 如果日期格式非法。
 */
const parseDateOptimized = (dateStr) => {
  const tokens = dateStr.split(/\s/g);
  if (tokens.length !== 2) {
    throw new Error(`非法日期格式: ${dateStr}`);
  }

  const [monthToken, yearToken] = tokens;
  const year = +yearToken;

  let monthIndex;
  if (!isNaN(monthToken)) {
    // 数字月份
    monthIndex = +monthToken - 1;
  } else {
    // 月份名称，通过查找预生成的月份名称数组获取索引
    monthIndex = monthNames.indexOf(monthToken);
    if (monthIndex === -1) {
      throw new Error(`无法识别的月份名称: ${monthToken}`);
    }
  }

  // 构造Date对象，日期固定为1
  return new Date(year, monthIndex, 1);
};

// 封装一个便捷函数，用于解析并格式化日期
const convertDate = (dateStr) => usDateFormatter.format(parseDateOptimized(dateStr));

// 再次测试
['6 2023', 'June 2023', 'foobar', 'InvalidMonth 2023'].forEach((dateStr) => {
  try {
    console.log(`输入: "${dateStr}" -> 输出: ${convertDate(dateStr)}`);
  } catch (e) {
    console.log(`输入: "${dateStr}" -> 错误: ${e.message}`);
  }
});
/* 预期输出:
输入: "6 2023" -> 输出: 06/01/2023
输入: "June 2023" -> 输出: 06/01/2023
输入: "foobar" -> 错误: 非法日期格式: foobar
输入: "InvalidMonth 2023" -> 错误: 无法识别的月份名称: InvalidMonth
*/

// dateUtils.js
const getLocalMonthNames = (locale = 'default', format = 'long') =>
  Array.from({ length: 12 }, (_, monthIndex) =>
    new Date(0, monthIndex, 1).toLocaleString(locale, { month: format }));

const monthNames = getLocalMonthNames('en-US'); // 仅需生成一次

const dateFormatter = new Intl.DateTimeFormat('en-US', {
  month: '2-digit',
  day: '2-digit',
  year: 'numeric'
}); // 仅需创建一次

const parseDate = (dateStr) => {
  const tokens = dateStr.split(/\s/g);
  if (tokens.length !== 2) {
    throw new Error(`非法日期格式: ${dateStr}`);
  }
  const [monthToken, yearToken] = tokens;
  const year = +yearToken;
  let monthIndex;
  if (!isNaN(monthToken)) {
    monthIndex = +monthToken - 1;
  } else {
    monthIndex = monthNames.indexOf(monthToken);
    if (monthIndex === -1) {
      throw new Error(`无法识别的月份名称: ${monthToken}`);
    }
  }
  return new Date(year, monthIndex, 1);
};

// 导出转换函数，以便在Vue组件中导入和使用
const convertDate = (dateStr) => {
  try {
    return dateFormatter.format(parseDate(dateStr));
  } catch (e) {
    return `错误: ${e.message}`; // 在UI中显示错误信息
  }
};

// Vue 实例
new Vue({
  el: '#app',
  data() {
    return {
      input: 'June 2023' // 默认输入
    }
  },
  computed: {
    // 使用计算属性实时转换输入
    output: function() {
      return convertDate(this.input);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>日期字符串转换器</h2>
  <input v-model="input" placeholder="请输入日期 (例如: 6 2023 或 June 2023)">
  <p>转换结果: {{ output }}</p>
</div>

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-family: sans-serif;
}

#app input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}

#app p {
  font-size: 18px;
  color: #333;
}