React Date Picker日期转ISO格式：格式(a)实现及日期偏移问题求助

问题分析 #

你当前遇到两个核心问题：

1. 无法将选中的日期转换为格式(a)："2022-10-13T00:00:00+05:30"（带本地时区偏移的ISO格式）
2. 使用new Date(dateStr).toUTCString()处理时出现月份、日期偏移错误，且输出格式不符合(b)(c)的要求

解决方案 #

首先注意：React Date Picker选中后返回的是原生Date对象，不需要再用字符串重新构造Date，这是导致日期偏移的主要原因之一。直接使用返回的Date对象进行格式转换即可。

1. 格式(b)(c)：UTC时区的ISO 8601格式（"2022-10-12T18:30:00.000Z"） #

你的目标格式是UTC时区的带毫秒的ISO字符串，直接使用Date对象的toISOString()方法即可，这会自动将本地时间转换为UTC时间并输出正确格式：

// 假设selectedDate是React Date Picker返回的Date对象
const utcIsoString = selectedDate.toISOString();
console.log(utcIsoString); // 输出："2022-10-12T18:30:00.000Z"

注：原日期Thu Oct 13 2022 00:00:00 GMT+0530对应的UTC时间是前一天的18:30，你示例中的(b)(c)日期可能是笔误。

2. 格式(a)：带本地时区偏移的ISO格式（"2022-10-13T00:00:00+05:30"） #

原生Date没有直接输出该格式的方法，以下两种方案可以实现：

方法一：手动构造格式

function formatWithTimezone(date) {
  const pad = (num) => num.toString().padStart(2, '0');
  const offsetMinutes = date.getTimezoneOffset();
  const offsetSign = offsetMinutes > 0 ? '-' : '+';
  const offsetHours = Math.floor(Math.abs(offsetMinutes) / 60);
  const offsetMins = Math.abs(offsetMinutes) % 60;
  
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}${offsetSign}${pad(offsetHours)}:${pad(offsetMins)}`;
}

// 使用示例
const timezoneIsoString = formatWithTimezone(selectedDate);
console.log(timezoneIsoString); // 输出："2022-10-13T00:00:00+05:30"

方法二：使用Intl.DateTimeFormat（更简洁）

function formatWithTimezone(date) {
  return new Intl.DateTimeFormat('en-CA', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
    timeZoneName: 'shortOffset'
  }).format(date).replace(', ', 'T').replace(/([+-]\d{2})(\d{2})/, '$1:$2');
}

// 使用示例
const timezoneIsoString = formatWithTimezone(selectedDate);
console.log(timezoneIsoString); // 输出："2022-10-13T00:00:00+05:30"

3. 修正日期偏移问题 #

你之前出现月份超前1个月、日期超前21天的问题，大概率是因为将Date对象转换成字符串后再重新构造Date，这会导致时区解析错误。直接使用React Date Picker返回的Date对象进行操作，不要额外转换为字符串再构造。

错误示例：

// 不要这样做：将Date转为字符串再重新构造
const dateStr = selectedDate.toString();
const wrongDate = new Date(dateStr);

直接使用selectedDate这个原生Date对象即可。

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