如何解决DevExtreme DateBox组件的getFullYear()函数TypeError错误？

使用DevExtreme-React DateBox组件时，通过onValueChanged函数修改值失败，同时抛出如下错误：

Uncaught TypeError: t.getFullYear is not a function
    at w (dx.all.js:19:2246625)
    at x (dx.all.js:19:2246540)
    at Object.sameDate (dx.all.js:19:2249338)
    at t._valueChangedHandler (dx.all.js:19:1580825)
    at Object.execute (dx.all.js:19:2166269)
    at l._executeAction (dx.all.js:19:2165470)
    at l.execute (dx.all.js:19:2165081)
    at t.<anonymous> (dx.all.js:19:2173158)
    at t.l [as _valueChangeAction] (dx.all.js:19:2173871)
    at t._raiseValueChangeAction (dx.all.js:31:453687)

测试用示例代码：

function App() {
  const [dateValue, setDateValue] = useState<string>("");

  const onDateValueChanged = (e: ValueChangedEvent) => {
    setDateValue(e.value);
  }

  return (
    <div>
      <DateBox
        type="datetime"
        dateSerializationFormat="yyyy-MM-dd HH:mm:ss"
        displayFormat="yyyy-MM-dd HH:mm:ss"
        isRequired={true}
        isDisabled={false}
        isReadonly={false}
        value={dateValue}
        onValueChanged={onDateValueChanged}
        max={new Date()}
      />
    </div>
  );
}

问题原因 #

报错根源在于组件内部尝试对value调用getFullYear()方法，但你的dateValue初始值为空字符串，且后续传递的字符串无法被组件解析为有效的Date对象，导致调用Date方法失败。

解决方案 #

方案1：使用Date类型的状态（推荐）

将状态类型改为Date | null，初始值设为null，让组件直接处理Date对象，避免类型不匹配问题：

import { useState } from 'react';
import { DateBox, ValueChangedEvent } from 'devextreme-react/date-box';

function App() {
  const [dateValue, setDateValue] = useState<Date | null>(null);

  const onDateValueChanged = (e: ValueChangedEvent) => {
    setDateValue(e.value as Date | null);
  }

  return (
    <div>
      <DateBox
        type="datetime"
        dateSerializationFormat="yyyy-MM-dd HH:mm:ss"
        displayFormat="yyyy-MM-dd HH:mm:ss"
        isRequired={true}
        isDisabled={false}
        isReadonly={false}
        value={dateValue}
        onValueChanged={onDateValueChanged}
        max={new Date()}
      />
    </div>
  );
}

方案2：保留字符串类型状态

如果需要以字符串形式存储日期值，需在传递给组件前将字符串转回Date对象，同时在onValueChanged中格式化Date对象为指定字符串：

import { useState } from 'react';
import { DateBox, ValueChangedEvent } from 'devextreme-react/date-box';

function App() {
  const [dateValue, setDateValue] = useState<string>("");

  const onDateValueChanged = (e: ValueChangedEvent) => {
    const formattedDate = e.value ? e.value.toISOString().slice(0, 19).replace('T', ' ') : "";
    setDateValue(formattedDate);
  }

  const dateBoxValue = dateValue ? new Date(dateValue) : null;

  return (
    <div>
      <DateBox
        type="datetime"
        dateSerializationFormat="yyyy-MM-dd HH:mm:ss"
        displayFormat="yyyy-MM-dd HH:mm:ss"
        isRequired={true}
        isDisabled={false}
        isReadonly={false}
        value={dateBoxValue}
        onValueChanged={onDateValueChanged}
        max={new Date()}
      />
    </div>
  );
}

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