前端查询夏令时和时区

详细展示如何在前端使用Moment.js和Moment-Timezone库处理时区转换、夏令时检测和时区信息查询。包含实用的交互式演示和代码示例。

安装和引入

Moment.js和Moment-Timezone是处理JavaScript时区和时间的强大库。以下是各种安装和引入方法：

1. CDN引入（推荐快速开始）

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>
                

2. NPM安装

# 安装moment和moment-timezone
npm install moment moment-timezone

# 或使用yarn
yarn add moment moment-timezone
                

3. ES6模块引入

import moment from 'moment-timezone';

// 或分别引入
import moment from 'moment';
import 'moment-timezone';
                

4. CommonJS引入

const moment = require('moment-timezone');

基础使用示例

以下是Moment-Timezone库的核心功能和基本使用方法：

1. 获取当前时间

// 获取本地当前时间
const now = moment();
console.log(now.format('YYYY-MM-DD HH:mm:ss'));

// 获取特定时区的当前时间
const tokyoTime = moment.tz('Asia/Tokyo');
console.log(tokyoTime.format('YYYY-MM-DD HH:mm:ss'));

// 获取UTC时间
const utcTime = moment.utc();
console.log(utcTime.format('YYYY-MM-DD HH:mm:ss'));
                

2. 时区转换

// 将本地时间转换为其他时区
const localTime = moment('2025-01-01 12:00:00');
const newYorkTime = localTime.tz('America/New_York');
const londonTime = localTime.tz('Europe/London');

console.log('本地时间:', localTime.format('YYYY-MM-DD HH:mm:ss'));
console.log('纽约时间:', newYorkTime.format('YYYY-MM-DD HH:mm:ss'));
console.log('伦敦时间:', londonTime.format('YYYY-MM-DD HH:mm:ss'));
                

3. 夏令时检测

// 检查指定时间是否为夏令时
const summerDate = moment.tz('2025-07-01', 'America/New_York');
const winterDate = moment.tz('2025-01-01', 'America/New_York');

console.log('7月1日是否为夏令时:', summerDate.isDST());  // true
console.log('1月1日是否为夏令时:', winterDate.isDST());  // false

// 获取UTC偏移量
console.log('夏季UTC偏移:', summerDate.utcOffset() / 60, '小时');  // -4小时
console.log('冬季UTC偏移:', winterDate.utcOffset() / 60, '小时');  // -5小时
                

4. 时区信息查询

// 获取所有时区列表
const allTimezones = moment.tz.names();
console.log('支持的时区数量:', allTimezones.length);
console.log('前5个时区:', allTimezones.slice(0, 5));

// 获取时区缩写
const timezone = moment.tz('2025-01-01', 'America/New_York');
console.log('时区缩写:', timezone.format('z'));  // EST

// 猜测用户时区
const guessedTimezone = moment.tz.guess();
console.log('猜测的时区:', guessedTimezone);
                

5. 实用工具函数

// 时区转换函数
function convertTimezone(dateTime, fromTz, toTz) {
    return moment.tz(dateTime, fromTz).tz(toTz);
}

// 使用示例
const result = convertTimezone('2025-01-01 12:00:00', 'Asia/Shanghai', 'America/New_York');
console.log(result.format('YYYY-MM-DD HH:mm:ss'));

// 获取多个城市时间
function getMultipleCityTimes(cities) {
    return cities.map(city => ({
        city: city.name,
        timezone: city.timezone,
        time: moment.tz(city.timezone).format('YYYY-MM-DD HH:mm:ss'),
        isDST: moment.tz(city.timezone).isDST()
    }));
}

// 使用示例
const cities = [
    { name: '北京', timezone: 'Asia/Shanghai' },
    { name: '纽约', timezone: 'America/New_York' },
    { name: '伦敦', timezone: 'Europe/London' },
    { name: '东京', timezone: 'Asia/Tokyo' }
];

const cityTimes = getMultipleCityTimes(cities);
console.log(cityTimes);
                

重要提示：

Moment.js已进入维护模式，新项目建议考虑使用Day.js、date-fns或原生的Intl.DateTimeFormat API
使用with-data版本的moment-timezone包含完整的时区数据，文件较大（约35KB）
时区名称使用IANA时区数据库标准（如Asia/Shanghai、America/New_York）
夏令时规则会自动处理，无需手动计算

交互式演示

以下演示展示了Moment-Timezone库的各种功能，您可以直接操作体验：

特定时区当前时间

选择时区：

夏令时信息

选择时区：

选择年份：

时区列表

显示所有支持的时区（共 0 个）

多城市时间比较

特定日期检查

选择日期：

选择时区：