26. 日期时间与 Intl：格式化、倒计时、时区意识

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

选择活动日期

三、知识点提醒

日期计算最好先统一到当天零点，减少小时差影响。
`Intl.DateTimeFormat` 比手动拼接日期更可靠。
真实项目中注意用户所在时区。

四、练习建议

增加英文日期格式切换。
实现活动倒计时到小时分钟秒。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/26-date-intl.js，下面同步展示，方便学习和复制。

// 页面 26：Date 与 Intl 日期格式化
const dateInput = document.querySelector('#p26-date');
const dateOutput = document.querySelector('#p26-output');

function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  }).format(date);
}

function getDaysLeft(targetDate) {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  targetDate.setHours(0, 0, 0, 0);
  const diff = targetDate - today;
  return Math.ceil(diff / (1000 * 60 * 60 * 24));
}

function renderDateInfo() {
  if (!dateInput.value) {
    dateOutput.textContent = '请选择日期';
    return;
  }

  const targetDate = new Date(dateInput.value);
  const daysLeft = getDaysLeft(targetDate);
  const message = daysLeft >= 0 ? `还有 ${daysLeft} 天` : `已经过去 ${Math.abs(daysLeft)} 天`;
  dateOutput.textContent = `目标日期：${formatDate(targetDate)}\n${message}`;
}

document.querySelector('#p26-calc').addEventListener('click', renderDateInfo);
dateInput.valueAsDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
renderDateInfo();