如何在console.log及HTML中自定义显示无秒与时区的时间日期？

1. 生成符合需求的日期格式 #

要得到Sun Nov 27 2022 20:26这种不带秒和时区的格式，有两种实用方案：

方案一：用toLocaleString配置参数实现 #

通过传入自定义配置项，精准控制显示内容：

const formatDateTime = (date: Date): string => {
  return date.toLocaleString('en-US', {
    weekday: 'short', // 星期缩写（Sun/Mon...）
    month: 'short',   // 月份缩写（Nov/Dec...）
    day: 'numeric',   // 日期数字（27/28...）
    year: 'numeric',  // 四位年份
    hour: '2-digit',  // 两位小时
    minute: '2-digit' // 两位分钟
  }).replace(',', ''); // 去掉默认生成的逗号，匹配目标格式
};

const currentDate = new Date();
const formattedForHTML = formatDateTime(currentDate);

方案二：手动拼接日期组件（更灵活） #

如果需要完全自定义格式，直接调用Date原生方法拼接：

const getWeekdayShort = (date: Date): string => {
  const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  return weekdays[date.getDay()];
};

const getMonthShort = (date: Date): string => {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return months[date.getMonth()];
};

const formatDateTime = (date: Date): string => {
  const weekday = getWeekdayShort(date);
  const month = getMonthShort(date);
  const day = date.getDate();
  const year = date.getFullYear();
  const hour = String(date.getHours()).padStart(2, '0'); // 补零成两位格式
  const minute = String(date.getMinutes()).padStart(2, '0');
  
  return `${weekday} ${month} ${day} ${year} ${hour}:${minute}`;
};

2. Console与HTML的差异化显示 #

要实现两者显示不同内容，只需分别生成对应格式的字符串即可：

const currentDate = new Date();

// 给HTML的精简格式（不带秒和时区）
const htmlDisplay = formatDateTime(currentDate);
// 给Console的完整格式（带秒，方便调试）
const consoleDisplay = `${htmlDisplay}:${String(currentDate.getSeconds()).padStart(2, '0')}`;

// 控制台输出调试用的完整时间
console.log('当前完整时间:', consoleDisplay);
// 将htmlDisplay绑定到HTML模板（若用Vue/React等框架，直接绑定{{ htmlDisplay }}即可）

3. 完整原生HTML+TypeScript示例 #

<!-- HTML部分 -->
<p id="time-display">当前时间：</p>

<!-- TypeScript部分 -->
<script lang="ts">
const getWeekdayShort = (date: Date): string => {
  const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  return weekdays[date.getDay()];
};

const getMonthShort = (date: Date): string => {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return months[date.getMonth()];
};

const formatDateTime = (date: Date): string => {
  const weekday = getWeekdayShort(date);
  const month = getMonthShort(date);
  const day = date.getDate();
  const year = date.getFullYear();
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  
  return `${weekday} ${month} ${day} ${year} ${hour}:${minute}`;
};

const currentDate = new Date();
const htmlDisplay = formatDateTime(currentDate);
const consoleDisplay = `${htmlDisplay}:${String(currentDate.getSeconds()).padStart(2, '0')}`;

console.log('控制台完整时间:', consoleDisplay);
// 原生HTML手动更新DOM
document.getElementById('time-display')!.textContent = `当前时间：${htmlDisplay}`;
</script>

内容的提问来源于stack exchange，提问作者Grey Ace