如何在JavaScript中使用dayjs、date-fns或luxon从ISO8601偏移字符串获取并展示原时区与本地时间？

嘿，我来帮你搞定这个问题！你已经知道怎么展示本地时间了，接下来我会分别说明用dayjs、date-fns、luxon这三个库如何获取并显示原时区的时间，同时把完整的示例代码补全。

首先明确需求：我们有一个带固定偏移的ISO8601字符串，比如2024-12-26T22:22:00+12:00，需要同时展示原时区的时间（这里是22:22）和用户本地时区的时间（比如CST时区的04:22）。

1. 使用date-fns #

date-fns核心库本身对时区支持有限，需要搭配date-fns-tz扩展包来处理时区相关操作。

代码示例 #

// 引入依赖
const { format, parseISO } = window.dateFns;
const { formatInTimeZone } = window.dateFnsTz;

const isoString = '2024-12-26T22:22:00+12:00';

// 本地时间
updateTime('fns', format(parseISO(isoString), 'HH:mm')); // 输出本地时间，如04:22

// 原时区时间：从ISO字符串中提取偏移作为时区参数
const timeZoneOffset = isoString.slice(-6); // 获取+12:00部分
updateTime('fns-original', formatInTimeZone(parseISO(isoString), timeZoneOffset, 'HH:mm')); // 输出22:22

注意：需要在HTML中额外引入date-fns-tz的CDN链接，比如<script src="https://cdn.jsdelivr.net/npm/date-fns-tz@latest"></script>

2. 使用dayjs #

dayjs需要引入utc、timezone和parseZone三个插件来处理时区保留与转换。

代码示例 #

// 扩展插件
dayjs.extend(dayjs_plugin_utc);
dayjs.extend(dayjs_plugin_timezone);
dayjs.extend(dayjs_plugin_parseZone);

const isoString = '2024-12-26T22:22:00+12:00';

// 本地时间
updateTime('dayjs', dayjs(isoString).local().format('HH:mm')); // 输出本地时间，如04:22

// 原时区时间：使用parseZone保留原偏移
updateTime('dayjs-original', dayjs.parseZone(isoString).format('HH:mm')); // 输出22:22

注意：需要额外引入parseZone插件的CDN链接，比如<script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/parseZone.js"></script>

3. 使用luxon #

luxon对时区的支持非常原生，无需额外插件，直接通过API就能处理。

代码示例 #

const { DateTime } = window.luxon;

const isoString = '2024-12-26T22:22:00+12:00';

// 本地时间：转换为本地时区后格式化
updateTime('luxon', DateTime.fromISO(isoString).toLocal().toFormat('HH:mm')); // 输出本地时间，如04:22

// 原时区时间：直接格式化原时区的DateTime对象
updateTime('luxon-original', DateTime.fromISO(isoString).toFormat('HH:mm')); // 输出22:22

完整的HTML示例（补全后） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time Comparison</title>
    <script src="https://cdn.jsdelivr.net/npm/date-fns@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns-tz@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/timezone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/utc.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/parseZone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luxon@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-joda@latest"></script>
</head>
<body>
    <h3>ISO String: <span id="iso"></span></h3>

    <h4>Local Time</h4>
    <p>date-fns: <span id="fns"></span></p>
    <p>dayjs: <span id="dayjs"></span></p>
    <p>luxon: <span id="luxon"></span></p>
    <p>moment: <span id="moment"></span></p>
    <p>js-joda: <span id="joda"></span></p>

    <h4>Original Time</h4>
    <p>date-fns: <span id="fns-original"></span></p>
    <p>dayjs: <span id="dayjs-original"></span></p>
    <p>luxon: <span id="luxon-original"></span></p>
    <p>moment: <span id="moment-original"></span></p>
    <p>js-joda: <span id="joda-original"></span></p>

    <script>
        const isoString = '2024-12-26T22:22:00+12:00';
        document.getElementById('iso').textContent = isoString;

        const updateTime = (id, value) => {
            document.getElementById(id).textContent = value;
        };

        // date-fns
        const { format, parseISO } = window.dateFns;
        const { formatInTimeZone } = window.dateFnsTz;
        updateTime('fns', format(parseISO(isoString), 'HH:mm '));
        const timeZoneOffset = isoString.slice(-6);
        updateTime('fns-original', formatInTimeZone(parseISO(isoString), timeZoneOffset, 'HH:mm'));

        // dayjs
        updateTime('dayjs', dayjs(isoString).local().format('HH:mm'));
        updateTime('dayjs-original', dayjs.parseZone(isoString).format('HH:mm'));

        // luxon
        updateTime('luxon', DateTime.fromISO(isoString).toLocal().toFormat('HH:mm'));
        updateTime('luxon-original', DateTime.fromISO(isoString).toFormat('HH:mm'));

        // moment
        updateTime('moment', moment(isoString).format('HH:mm'));
        updateTime('moment-original', moment.parseZone(isoString).format('HH:mm'));

        // js-joda
        const { ZonedDateTime, ZoneId, DateTimeFormatter } = JSJoda;
        updateTime('joda', ZonedDateTime.parse(isoString).withZoneSameInstant(ZoneId.systemDefault()).format(DateTimeFormatter.ofPattern('HH:mm')));
        updateTime('joda-original', ZonedDateTime.parse(isoString).format(DateTimeFormatter.ofPattern('HH:mm')));
    </script>
</body>
</html>

这样三个库就都能正确展示原时区和本地时间啦，你可以根据项目需求选择合适的工具~

备注：内容来源于stack exchange，提问作者Igor Golovin