使用date-fns startOfMonth获月初却得前一天？时区问题求解

你的问题核心是时区偏移导致的显示差异：date-fns的startOfMonth默认基于本地时区计算，会把日期设置为当月1日的00:00:00（你的GMT+2时区），但toISOString()会将这个本地时间转换为UTC时间，GMT+2的00:00转成UTC就是前一天的22:00，所以出现了看起来是"前一天"的结果。

解决方案 #

1. 保留本地时区的月初结果 #

如果需要的是本地时区的当月1日0点，不要用toISOString()验证，改用本地日期格式化方法：

const now = new Date()
const start = startOfMonth(now)

// 方法1：用toLocaleDateString输出本地格式
console.log(start.toLocaleDateString()) // 示例输出："2023/9/1"

// 方法2：手动构造本地时区的ISO格式字符串
const localStartStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-01T00:00:00`
console.log(localStartStr) // 输出："2023-09-01T00:00:00"

2. 获取UTC时区的月初结果 #

如果需要UTC时区的当月1日0点，使用date-fns提供的UTC版本方法startOfMonthUTC：

import { startOfMonthUTC } from 'date-fns'

const now = new Date()
const start = startOfMonthUTC(now)
console.log(start.toISOString()) // 输出："2023-09-01T00:00:00.000Z"

3. 处理指定时区（进阶） #

如果需要非本地、非UTC的特定时区（比如GMT+2）的月初，可使用date-fns-tz扩展库的zonedTimeToUtc配合处理：

import { startOfMonth } from 'date-fns'
import { zonedTimeToUtc } from 'date-fns-tz'

// 构造GMT+2时区的当月1日0点
const gmt2Start = zonedTimeToUtc(`${new Date().getFullYear()}-${new Date().getMonth()+1}-01T00:00:00`, 'Etc/GMT-2')
console.log(gmt2Start.toISOString()) // 输出："2023-08-31T22:00:00.000Z"（对应GMT+2的00:00）

通用使用技巧 #

• 明确时区需求：date-fns的常规方法默认基于本地时区，UTC操作必须用带UTC后缀的方法（如startOfMonthUTC、formatUTC）
• 避免用toISOString()验证本地时区结果：toISOString()强制转换为UTC，会掩盖本地时区的真实时间
• 跨时区场景用date-fns-tz：如果需要处理特定时区（如用户所在时区），搭配date-fns-tz扩展能更精准控制时区转换

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