如何仅通过CDN引入实现时间字符串转指定时区的Date对象

方案1：使用Luxon实现 #

引入方式 #

在HTML中直接插入CDN引入标签：

<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>

功能实现代码 #

const { DateTime } = luxon;

// 可变输入时间字符串
const inputTimeStr = '2021-11-26 21:47';
const targetTimezone = 'Europe/Moscow';

// 解析为莫斯科时区对应时间
const moscowTime = DateTime.fromFormat(inputTimeStr, 'yyyy-MM-dd HH:mm', {
  zone: targetTimezone
});

// 获取原生Date对象
const nativeDate = moscowTime.toJSDate();
// 获取对应UTC格式化字符串
const utcTimeStr = moscowTime.toUTC().toFormat('yyyy-MM-dd HH:mm:ss');

console.log('莫斯科时间对应原生Date：', nativeDate);
console.log('对应UTC时间：', utcTimeStr);

方案2：使用date-fns + date-fns-tz实现 #

引入方式 #

在HTML中直接插入CDN引入标签：

<script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/dist/date-fns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@date-fns/tz@1.0.1/dist/date-fns-tz.umd.min.js"></script>

功能实现代码 #

const { zonedTimeToUtc, format } = dateFnsTz;

const inputTimeStr = '2021-11-26 21:47';
const targetTimezone = 'Europe/Moscow';

// 直接得到对应UTC时间的Date对象
const utcDate = zonedTimeToUtc(inputTimeStr, targetTimezone);

// 校验时间正确性
console.log('UTC Date对象：', utcDate);
console.log('格式化校验莫斯科时间：', format(utcDate, 'yyyy-MM-dd HH:mm', { timeZone: targetTimezone }));

注意事项 #

• 原生Date对象本身不携带时区属性，直接打印会按运行环境的本地时区显示，属于正常现象，其内部存储的时间戳是对应莫斯科时区指定时间的正确值
• 两种方案返回的时间戳完全一致，可根据个人使用习惯选择

内容的提问来源于stack exchange，提问作者Philipp Chapkovski