如何在JavaScript中格式化日期时间？实现ISO时间格式转换

你可以通过自定义日期格式化函数处理ISO格式的update_date，将其转换为YYYY-MM-DD HH:mm:ss am/pm格式，以下是具体实现方案：

方案一：原生Date对象手动处理 #

这种方式能精准控制输出格式，适合需要自定义规则的场景：

// 定义日期格式化函数
function formatDate(isoDate) {
  const date = new Date(isoDate);
  // 获取年、月、日（月份从0开始，需+1）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  // 处理12小时制和上午/下午标识
  let hours = date.getHours();
  const period = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // 将0点转换为12
  hours = String(hours).padStart(2, '0');
  
  // 获取分钟和秒，不足两位补零
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${period}`;
}

方案二：使用Intl.DateTimeFormat（更简洁） #

利用浏览器内置的国际化API拆分日期组件，再拼接成目标格式：

function formatDate(isoDate) {
  const date = new Date(isoDate);
  // 获取日期各部分的结构化数据
  const parts = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: true
  }).formatToParts(date);
  
  // 提取各部分值
  const year = parts.find(p => p.type === 'year').value;
  const month = parts.find(p => p.type === 'month').value;
  const day = parts.find(p => p.type === 'day').value;
  const hour = parts.find(p => p.type === 'hour').value;
  const minute = parts.find(p => p.type === 'minute').value;
  const second = parts.find(p => p.type === 'second').value;
  const period = parts.find(p => p.type === 'dayPeriod').value.toLowerCase();
  
  return `${year}-${month}-${day} ${hour}:${minute}:${second} ${period}`;
}

整合到你的代码中 #

将格式化函数加入原代码，替换直接输出user.update_date的部分即可：

fetch('http://localhost:8082/list/findbyid/'+id+'/'+productid)
  .then(response => response.json())
  .then(data => {
    const tableBody = document.getElementById('dataInven');
    
    // 插入日期格式化函数
    function formatDate(isoDate) {
      const date = new Date(isoDate);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      let hours = date.getHours();
      const period = hours >= 12 ? 'pm' : 'am';
      hours = hours % 12;
      hours = hours ? hours : 12;
      hours = String(hours).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${period}`;
    }

    data.forEach(user => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${user.procode}</td>
        <td>${user.proname}</td>
        <td>${user.unit}</td>
        <td>${user.cat_name}</td>
        <td>${user.quantity}</td>
        <td>${user.update_by}</td>
        <!-- 调用格式化函数处理日期 -->
        <td>${formatDate(user.update_date)}</td>
      `;
      tableBody.appendChild(row);
    });
  });

注意事项 #

• 上述代码默认将ISO日期转换为本地时区的时间，如果需要保持UTC时区，只需将getFullYear、getMonth等方法替换为getUTCFullYear、getUTCMonth等UTC系列方法即可。
• 确保传入的isoDate是有效的ISO格式字符串，否则new Date()可能返回无效日期。

内容的提问来源于stack exchange，提问作者Jav JakSmoke