在JavaScript中合并日期与时间且不转换为UTC

核心问题是要明确绑定活动的目标时区，避免依赖浏览器/服务器的本地时区，同时正确转换flatpickr的输入值为对应时区的UTC时间存储到Mongo（因为Mongo的ISODate本质存储UTC），读取时再转回目标时区显示。

步骤1：明确活动时区 #

首先要确定活动所属的时区（比如墨尔本是Australia/Melbourne），这个值要硬编码或从配置读取，不能动态取运行环境时区。

步骤2：使用date-fns-tz实现（推荐） #

安装依赖 #

npm install date-fns date-fns-tz

代码实现 #

import { parse, format } from 'date-fns';
import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';

// 固定活动时区
const EVENT_TIMEZONE = 'Australia/Melbourne';

// flatpickr返回的两个值
const flatpickrDate = '2022-11-18T00:00:00.000Z';
const flatpickrTime = '09:00 AM';

// 1. 将UTC日期转成目标时区的日期，提取准确的年月日
const utcDateObj = new Date(flatpickrDate);
const zonedDateObj = utcToZonedTime(utcDateObj, EVENT_TIMEZONE);
const [year, month, day] = [zonedDateObj.getFullYear(), zonedDateObj.getMonth(), zonedDateObj.getDate()];

// 2. 解析时间字符串为小时和分钟
const timeObj = parse(flatpickrTime, 'hh:mm a', new Date());
const [hours, minutes] = [timeObj.getHours(), timeObj.getMinutes()];

// 3. 在目标时区创建本地时间，转成UTC后存Mongo
const localDateTime = new Date(year, month, day, hours, minutes);
const utcForMongo = zonedTimeToUtc(localDateTime, EVENT_TIMEZONE);

// 存储到Mongo：utcForMongo就是对应目标时区2022-11-18 09:00的UTC时间
// 示例：墨尔本时区夏令时（UTC+11）下，utcForMongo是2022-11-17T22:00:00.000Z

// 读取时转回目标时区显示
const storedISODate = ISODate("2022-11-17T22:00:00.000Z"); // Mongo返回的日期
const displayDate = utcToZonedTime(storedISODate, EVENT_TIMEZONE);
const displayStr = format(displayDate, 'yyyy-MM-dd HH:mm', { timeZone: EVENT_TIMEZONE });
// displayStr输出："2022-11-18 09:00"

步骤3：使用moment-timezone实现 #

安装依赖 #

npm install moment moment-timezone

代码实现 #

import moment from 'moment-timezone';

const EVENT_TIMEZONE = 'Australia/Melbourne';

const flatpickrDate = '2022-11-18T00:00:00.000Z';
const flatpickrTime = '09:00 AM';

// 1. 解析UTC日期为目标时区的日期字符串
const zonedDateStr = moment.utc(flatpickrDate).tz(EVENT_TIMEZONE).format('YYYY-MM-DD');

// 2. 合并日期和时间，创建目标时区的时间对象
const localDateTime = moment.tz(`${zonedDateStr} ${flatpickrTime}`, 'YYYY-MM-DD hh:mm a', EVENT_TIMEZONE);

// 3. 转成UTC时间存Mongo
const utcForMongo = localDateTime.utc().toDate();

// 读取时显示
const storedISODate = ISODate("2022-11-17T22:00:00.000Z");
const displayStr = moment(storedISODate).tz(EVENT_TIMEZONE).format('YYYY-MM-DD HH:mm');

关键注意事项 #

• 禁止依赖运行环境时区：无论浏览器还是服务器，都必须用固定的活动时区做转换，否则不同地区的用户/服务器会算出不同的时间。
• 优化flatpickr配置：如果可以修改flatpickr的设置，将utc选项设为false，这样日期输入会返回带时区偏移的ISO字符串（比如2022-11-18T00:00:00+11:00），解析起来更直接，无需转UTC再转回目标时区。
• Mongo存储逻辑：Mongo的ISODate只能存储UTC时间，所以必须把目标时区的本地时间转成对应的UTC再存储，读取时反向转换即可保证显示正确的本地时间。

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