如何在指定时区获取某一天的起始时间（午夜）

需求：使用Date Picker选择日期后，将其转换为Europe/London时区的当日午夜（00:00:00）时间，例如选择2023-01-30时，期望输出：

Mon Jan 30 2023 00:00:00 GMT (London UK)

当前问题：使用date-fns的startOfDay方法实现时，输出的是本地时区（GMT-0500 Eastern Standard Time）的结果，不符合预期。

当前代码：

const d = '2023-01-30';
const [year, month, day] = d.split('-');
const y = startOfDay(new Date(year, month - 1, day));
console.log('🚀 ~ file: ScheduleSection.js:102 ~ convertDateToUtc ~ y', y);

// 实际输出：Mon Jan 30 2023 00:00:00 GMT-0500 (Eastern Standard Time)
// 期望输出：Mon Jan 30 2023 00:00:00 GMT (London UK)

解决方案 #

原生Date对象和基础date-fns工具都是基于本地时区处理的，要实现指定时区的时间转换，需要借助date-fns-tz扩展库（date-fns的时区处理插件）。

步骤如下：

1. 安装依赖（如果未安装）：

npm install date-fns-tz
# 或
yarn add date-fns-tz

2. 修改代码实现：

import { zonedTimeToUtc, formatInTimeZone } from 'date-fns-tz';

const d = '2023-01-30';
const targetTimeZone = 'Europe/London';

// 将日期转换为目标时区的当日起始时间对应的UTC时间
const londonStartOfDay = zonedTimeToUtc(`${d}T00:00:00`, targetTimeZone);

// 按期望格式输出目标时区的时间
const formattedResult = formatInTimeZone(
  londonStartOfDay,
  targetTimeZone,
  'EEE MMM dd yyyy HH:mm:ss zzz (zzzz)'
);

console.log(formattedResult);
// 输出：Mon Jan 30 2023 00:00:00 GMT (London UK)

说明 #

• zonedTimeToUtc：将指定时区的时间字符串转换为UTC时间，确保时间点对应目标时区的当日0点。
• formatInTimeZone：直接在目标时区下格式化日期，避免本地时区干扰，输出符合要求的格式。

内容的提问来源于stack exchange，提问作者Milos Pruginic