React Native中new Date('DD-MM-YYYY')为何返回错误日期？

• 用dayjs处理日期输入框，用户输入/选择DD-MM-YYYY格式日期时出现异常，测试原生Date()构造函数也有同样问题
• 执行代码：console.log(new Date('01-01-2023'));，输出结果为0006-07-16T02:00:00+02:00，完全不符合预期
• 使用YYYY-MM-DD格式时一切正常，该问题在Android和iOS平台均会出现

System:
  OS: macOS 14.2
  CPU: (12) arm64 Apple M2 Max
  Memory: 77.72 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 4.0.2
    path: ~/.nvm/versions/node/v20.10.0/bin/yarn
  npm:
    version: 10.2.3
    path: ~/.nvm/versions/node/v20.10.0/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/myuser/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

原因 #

原生Date构造函数解析字符串时，会默认把DD-MM-YYYY识别为MM-DD-YYYY（月-日-年）格式。当日期部分逻辑不合理时，部分JS引擎（比如React Native的Hermes）会出现解析错误，甚至生成完全偏离预期的日期。

解决方案 #

1. 用dayjs显式指定格式解析 #

既然已经在用dayjs，直接通过指定格式消除歧义：

import dayjs from 'dayjs';

// 按DD-MM-YYYY格式解析
const date = dayjs('01-01-2023', 'DD-MM-YYYY');
console.log(date.toISOString()); // 输出正确的2023-01-01T00:00:00Z

2. 手动转换格式后用原生Date解析 #

如果要使用原生Date，先把DD-MM-YYYY转成标准的YYYY-MM-DD格式：

function parseDDMMYYYY(dateStr) {
  const [day, month, year] = dateStr.split('-');
  return new Date(`${year}-${month}-${day}`);
}

console.log(parseDDMMYYYY('01-01-2023')); // 输出正确的Date对象

3. 统一输入格式 #

在输入环节做限制：用日期选择器组件（比如@react-native-community/datetimepicker）直接返回标准日期对象，或者限制用户只能输入YYYY-MM-DD格式的日期，从根源避免字符串解析问题。

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