从 v6 迁移到 v7
本指南描述了将日期和时间选择器从 v6 迁移到 v7 所需的更改。
介绍
这是一个将 @mui/x-date-pickers 从 v6 升级到 v7 的参考指南。要了解有关新主要版本更改的更多信息，请查看关于 MUI X v7 版本发布的博客文章。
开始使用新版本
在 package.json 中，将日期选择器包的版本更改为 ^7.0.0。
-"@mui/x-date-pickers": "^6.0.0",
+"@mui/x-date-pickers": "^7.0.0",
由于 v7 是一个主要版本发布，因此它包含影响公共 API 的更改。这些更改是为了提高一致性、改进稳定性和为新功能腾出空间而进行的。下面描述了从 v6 迁移到 v7 所需的步骤。
更新 @mui/material 包
为了能够选择使用 @mui/material 的最新 API，包对等依赖版本已更新为 ^5.15.14。这只是小版本更改，因此不应导致任何重大变更。请将您的 @mui/material 包更新到此版本或更高版本。
更新许可证包
如果您正在使用 Pickers 的商业版本（Pro 计划），则需要更新导入路径
-import { LicenseInfo } from '@mui/x-license-pro';
+import { LicenseInfo } from '@mui/x-license';
如果您的 package.json 的 dependencies 部分中有 @mui/x-license-pro，请重命名并将许可证包更新到最新版本
-"@mui/x-license-pro": ^6.0.0",
+"@mui/x-license": "^7.0.0",
运行代码转换
preset-safe 代码转换将自动调整您的大部分代码，以适应 v7 中的重大变更。您可以运行 v7.0.0/pickers/preset-safe，仅以日期和时间选择器为目标，或者运行 v7.0.0/preset-safe，以同时以其他 MUI X 组件（如数据网格）为目标。
选择 <path> 参数时，您可以选择在特定文件、文件夹或整个代码库上运行它。
// Date and Time Pickers specific
npx @mui/x-codemod@latest v7.0.0/pickers/preset-safe <path>
// Target other MUI X components as well
npx @mui/x-codemod@latest v7.0.0/preset-safe <path>
由该代码转换处理的重大变更在屏幕右侧的目录中用 ✅ emoji 符号表示。
如果您已应用 v7.0.0/pickers/preset-safe（或 v7.0.0/preset-safe）代码转换，则您应该无需对这些项目采取任何进一步的操作。
所有其他更改都必须手动处理。
重大变更
由于 v7 是一个主要版本发布，因此它包含一些影响公共 API 的更改。这些更改是为了提高一致性、改进稳定性和为新功能腾出空间而进行的。
放弃旧版捆绑包
所有 MUI X 包都已移除对 IE 11 的支持。不再包含用于支持 IE 11 等旧版浏览器的 legacy 捆绑包。
放弃 Webpack 4 支持
放弃对旧版浏览器的支持也意味着我们不再转译某些现代浏览器原生支持的功能，例如 Nullish Coalescing 和 Optional Chaining。
Webpack 4 不支持这些功能，因此如果您正在使用 Webpack 4，您将需要自行转译这些特性或升级到 Webpack 5。
以下是如何在 Webpack 4 上使用 @babel/preset-env 预设转译这些特性的示例
// webpack.config.js
module.exports = (env) => ({
// ...
module: {
rules: [
{
test: /\.[jt]sx?$/,
- exclude: /node_modules/,
+ exclude: [
+ {
+ test: path.resolve(__dirname, 'node_modules'),
+ exclude: [
+ // Covers @mui/x-date-pickers and @mui/x-date-pickers-pro
+ path.resolve(__dirname, 'node_modules/@mui/x-date-pickers'),
+ path.resolve(__dirname, 'node_modules/@mui/x-license'),
+ ],
+ },
+ ],
},
],
},
});
组件插槽
将 components 重命名为 slots
components 和 componentsProps 属性已分别重命名为 slots 和 slotProps 属性。这是 MUI 维护的所有不同库之间缓慢且持续的努力。为了平滑过渡，它们在 v6 期间已被弃用。并且已从 v7 中移除。
如果尚未完成，则可以通过代码转换处理此修改
npx @mui/x-codemod@latest v7.0.0/pickers/ <path>
查看 RFC 以获取更多信息。
✅ 重命名插槽类型
插槽接口已重命名以与 @mui/base 命名约定匹配。后缀 SlotsComponent 被 Slots 替换，SlotsComponentsProps 被 SlotProps 替换。如果您不依赖代码转换，请考虑检查 此文件 中所有重命名的类型。以下是 DateCalendar 类型化的示例。
-DateCalendarSlotsComponent
+DateCalendarSlots
-DateCalendarSlotsComponentsProps
+DateCalendarSlotProps
向 shortcuts 插槽 onChange 回调添加新参数
在选择快捷方式时触发的 onChange 回调现在需要两个新参数（以前它们是可选的）
- 快捷方式的
changeImportance。 - 包含整个快捷方式对象的
item。
const CustomShortcuts = (props) => {
return (
<React.Fragment>
{props.items.map(item => {
const value = item.getValue({ isValid: props.isValid });
return (
<button
- onClick={() => onChange(value)}
+ onClick={() => onChange(value, props.changeImportance ?? 'accept', item)}
>
{value}
</button>
)
}}
</React.Fragment>
)
}
<DatePicker slots={{ shortcuts: CustomShortcuts }} />
更改 calendarHeader 插槽的导入
与 calendarHeader 插槽相关的导入已从 @mui/x-date-pickers/DateCalendar 移动到 @mui/x-date-pickers/PickersCalendarHeader
export {
pickersCalendarHeaderClasses,
PickersCalendarHeaderClassKey,
PickersCalendarHeaderClasses,
PickersCalendarHeader,
PickersCalendarHeaderProps,
PickersCalendarHeaderSlotsComponent,
PickersCalendarHeaderSlotsComponentsProps,
ExportedPickersCalendarHeaderProps,
-} from '@mui/x-date-pickers/DateCalendar';
+} from '@mui/x-date-pickers/PickersCalendarHeader';
已移除的属性
将 shouldDisableClock 替换为 shouldDisableTime
已弃用的 shouldDisableClock 属性已被移除，建议使用更灵活的 shouldDisableTime 属性。shouldDisableClock 属性接收 value 作为小时、分钟或秒的 number。相反，shouldDisableTime 属性接收日期对象（基于使用的适配器）。您可以在 v6 迁移指南 中阅读有关此属性弃用的更多信息。
<DateTimePicker
- shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
/>
✅ 将 defaultCalendarMonth 替换为 referenceDate
已弃用的 defaultCalendarMonth 属性已被移除，建议使用更灵活的 referenceDate 属性。
-<DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
+<DateCalendar referenceDate={dayjs('2022-04-01')} />
已修改的属性
移除 dayOfWeekFormatter 属性的字符串参数
dayOfWeekFormatter 属性的字符串参数已被替换，建议使用日期对象以允许更大的灵活性。
<DateCalendar
// If you were still using the day string, you can get it back with your date library.
- dayOfWeekFormatter={dayStr => `${dayStr}.`}
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
// If you were already using the day object, just remove the first argument.
- dayOfWeekFormatter={(_dayStr, day) => `${day.format('dd')}.`
+ dayOfWeekFormatter={day => `${day.format('dd')}.`}
/>
日期相关属性的严格类型
所有日期相关属性现在都是严格类型的，仅接受您的适配器支持的日期格式（date-fns 的 Date 对象，days-js 的 daysjs.Dayjs 对象等）。
字段组件
更新 selectedSections 的格式
selectedSections 属性不再接受开始和结束索引。当选择多个但并非全部部分时，字段组件的行为不正确，您现在只能选择一个或所有部分
<DateField
- selectedSections={{ startIndex: 0, endIndex: 0 }}
+ selectedSections={0}
// If the field has 3 sections
- selectedSections={{ startIndex: 0, endIndex: 2 }}
+ selectedSections="all"
/>
替换 section 的 hasLeadingZeros 属性
属性 hasLeadingZeros 已从 sections 中移除，建议使用更精确的 hasLeadingZerosInFormat 和 hasLeadingZerosInInput 属性。要保持相同的行为，您可以将其替换为 hasLeadingZerosInFormat
const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
React.useEffect(() => {
const firstSection = fieldRef.current!.getSections()[0];
- console.log(firstSection.hasLeadingZeros);
+ console.log(firstSection.hasLeadingZerosInFormat);
}, []);
return <DateField unstableFieldRef={fieldRef} />;
无头字段
将 inputRef 移至传递给 hook 的 props 内部
字段 hook 现在仅接收 props，而不是包含 props 和 inputRef 的对象。
-const { inputRef, ...otherProps } = props
-const fieldResponse = useDateField({ props: otherProps, inputRef });
+const fieldResponse = useDateField(props);
如果您正在使用多输入范围字段 hook，则 startInputRef 和 endInputRef 参数也适用
- const { inputRef: startInputRef, ...otherStartTextFieldProps } = startTextFieldProps
- const { inputRef: endInputRef, ...otherEndTextFieldProps } = endTextFieldProps
const fieldResponse = useMultiInputDateRangeField({
sharedProps,
- startTextFieldProps: otherStartTextFieldProps,
- endTextFieldProps: otherEndTextFieldProps,
- startInputRef
- endInputRef,
+ startTextFieldProps,
+ endTextFieldProps
});
重命名 hook 返回的 ref 为 inputRef
当与 v6 TextField 方式（输入是 <input /> HTML 元素）一起使用时，字段 hook 返回一个 ref，该 ref 需要传递给 <input /> 元素。此 ref 以前名为 ref，为了更清晰，已重命名为 inputRef。
const fieldResponse = useDateField(props);
- return <input ref={fieldResponse.ref} />
+ return <input ref={fieldResponse.inputRef} />
如果您正在使用多输入范围字段 hook，则 startDate 和 endDate 对象中的 ref 也适用
const fieldResponse = useDateField(props);
return (
<div>
- <input ref={fieldResponse.startDate.ref} />
+ <input ref={fieldResponse.startDate.inputRef} />
<span>–</span>
- <input ref={fieldResponse.endDate.ref} />
+ <input ref={fieldResponse.endDate.inputRef} />
</div>
)
重构 useClearableField 的 API
useClearableField hook API 已简化，现在接受 props 参数，而不是 fieldProps、InputProps、clearable、onClear、slots 和 slotProps 参数。
您现在应该能够直接将字段 hook（例如：useDateField）的返回值传递给 useClearableField
const fieldResponse = useDateField(props);
- const { InputProps, onClear, clearable, slots, slotProps, ...otherFieldProps } = fieldResponse
- const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({
- fieldProps: otherFieldProps,
- InputProps,
- clearable,
- onClear,
- slots,
- slotProps,
- });
-
- return <MyCustomTextField {...processedFieldProps} InputProps={ProcessedInputProps} />
+ const processedFieldProps = useClearableField(fieldResponse);
+
+ return <MyCustomTextField {...processedFieldProps} />
不要将 enableAccessibleFieldDOMStructure 属性转发到 DOM
无头字段 hook（例如：useDateField）现在返回一个名为 enableAccessibleFieldDOMStructure 的新属性。这用于了解当前期望的 UI 是否是使用可访问的 DOM 结构构建的。
在构建自定义 UI 时，您很可能只支持一种 DOM 结构，因此您可以在将 enableAccessibleFieldDOMStructure 传递到 DOM 之前将其移除
function MyCustomTextField(props) {
const {
+ // Should be ignored
+ enableAccessibleFieldDOMStructure,
// ... rest of the props you are using
}
return ( /* Some UI to edit the date */ )
}
function MyCustomField(props) {
const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
...props,
+ // If you only support one DOM structure, we advise you to hardcode it
+ // here to avoid unwanted switches in your application.
+ enableAccessibleFieldDOMStructure: false,
});
return <MyCustomTextField ref={ref} {...fieldResponse} />;
}
function App() {
return <DatePicker slots={{ field: MyCustomField }} />;
}
日期管理
使用带有 luxon 的本地化周
当安装 Luxon v3.4.4 或更高版本时，AdapterLuxon 现在使用本地化周。此改进使 AdapterLuxon 与其他适配器的行为保持一致。
如果您想要保持每周的第一天为星期一，即使您的区域设置另有说明。您可以按如下方式硬编码周设置
import { Settings, Info } from 'luxon';
Settings.defaultWeekSettings = {
firstDay: 1,
minimalDays: Info.getMinimumDaysInFirstWeek(),
weekend: Info.getWeekendWeekdays(),
};
移除 monthAndYear 格式
monthAndYear 格式已被移除。它用于日历视图的头部。您可以将其替换为 calendarHeader 插槽的新 format 属性
<LocalizationProvider
adapter={AdapterDayJS}
- formats={{ monthAndYear: 'MM/YYYY' }}
/>
<DatePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<DateRangePicker
+ slotProps={{ calendarHeader: { format: 'MM/YYYY' }}}
/>
<LocalizationProvider />
已重命名的变量
✅ 将 dayPickerClasses 变量重命名为 dayCalendarClasses
dayPickerClasses 变量已重命名为 dayCalendarClasses，以与 v6.0.0 中引入的 DayCalendar 组件的新名称保持一致。
-import { dayPickerClasses } from '@mui/x-date-pickers/DateCalendar';
+import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
与 Day.js 一起使用
使用带有 Day.js 适配器的 UTC
LocalizationProvider 的 dateLibInstance 属性不再与 AdapterDayjs 一起使用。在组件中实现正确的时区支持之前，此属性用于将选择器设置为 UTC 模式。
// When a `value` or a `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
<DatePicker value={dayjs.utc('2022-04-17')} />
</LocalizationProvider>
// When no `value` or `defaultValue` is provided
<LocalizationProvider
adapter={AdapterDayjs}
- dateLibInstance={dayjs.utc}
>
- <DatePicker />
+ <DatePicker timezone="UTC" />
</LocalizationProvider>
与 customParseFormat 一起使用
对 dayjs.extend(customParseFormatPlugin) 的调用已移动到 AdapterDayjs 构造函数。这允许用户在适配器使用它之前将自定义选项传递给此插件。
如果您在渲染第一个 LocalizationProvider 组件之前使用此插件，并且未在您自己的代码库中调用 dayjs.extend，则您需要手动扩展 dayjs
import dayjs from 'dayjs';
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormatPlugin);
其他插件仍然在适配器初始化之前添加。
移除根级别 locales 导出
locales 导出已从包的根目录中移除。为了减小捆绑包大小，现在只能从 @mui/x-date-pickers/locales 或 @mui/x-date-pickers-pro/locales 路径访问 locales。如果您仍然依赖于根级别导出，请更新您的代码。
在 v7 之前，可以从包根目录导入 locales（即 import { frFR } from '@mui/x-date-pickers'）。
-import { frFR } from '@mui/x-date-pickers';
+import { frFR } from '@mui/x-date-pickers/locales';
移除 dateTimeViewRenderers 导出
dateTimeViewRenderers 导出已被移除，建议重用现有的时间视图渲染器（renderTimeViewClock、renderDigitalClockTimeView 和 renderMultiSectionDigitalClockTimeView）和日期视图渲染器（renderDateViewCalendar）来渲染 DesktopDateTimePicker。
如果您依赖于此导入，您可以参考 DesktopDateTimePicker 的实现，以了解如何自己组合渲染器。
适配器内部更改
已移除的方法
显示重大变更
移除 dateWithTimezone 方法
dateWithTimezone 方法已被移除，其内容已移动到 date 方法。您可以改为使用 date 方法
-adapter.dateWithTimezone(undefined, 'system');
+adapter.date(undefined, 'system');
移除 getDiff 方法
getDiff 方法已被移除。您可以直接使用您的日期库
// For Day.js
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
// For Luxon
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string'
+ ? DateTime.fromJSDate(new Date(comparing))
+ : comparing;
+ if (unit) {
+ return Math.floor(value.diff(comparing).as(unit));
+ }
+ return value.diff(comparing).as('millisecond');
+};
+
+const diff = getDiff(value, comparing, unit);
// For DateFns
-const diff = adapter.getDiff(value, comparing, unit);
+const getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => {
+ const parsedComparing = typeof comparing === 'string' ? new Date(comparing) : comparing;
+ switch (unit) {
+ case 'years':
+ return dateFns.differenceInYears(value, parsedComparing);
+ case 'quarters':
+ return dateFns.differenceInQuarters(value, parsedComparing);
+ case 'months':
+ return dateFns.differenceInMonths(value, parsedComparing);
+ case 'weeks':
+ return dateFns.differenceInWeeks(value, parsedComparing);
+ case 'days':
+ return dateFns.differenceInDays(value, parsedComparing);
+ case 'hours':
+ return dateFns.differenceInHours(value, parsedComparing);
+ case 'minutes':
+ return dateFns.differenceInMinutes(value, parsedComparing);
+ case 'seconds':
+ return dateFns.differenceInSeconds(value, parsedComparing);
+ default: {
+ return dateFns.differenceInMilliseconds(value, parsedComparing);
+ }
+ }
+};
+
+const diff = getDiff(value, comparing, unit);
// For Moment
-const diff = adapter.getDiff(value, comparing, unit);
+const diff = value.diff(comparing, unit);
移除 getFormatHelperText 方法
getFormatHelperText 方法已被移除。您可以改为使用 expandFormat
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format);
如果您需要完全相同的输出。您可以应用以下转换
// For Day.js
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
// For Luxon
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
// For DateFns
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
// For Moment
-const expandedFormat = adapter.getFormatHelperText(format);
+const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
移除 getMeridiemText 方法
getMeridiemText 方法已被移除。您可以使用 setHours、date 和 format 方法来重新创建其行为
-const meridiem = adapter.getMeridiemText('am');
+const getMeridiemText = (meridiem: 'am' | 'pm') => {
+ const date = adapter.setHours(adapter.date()!, meridiem === 'am' ? 2 : 14);
+ return utils.format(date, 'meridiem');
+};
+
+const meridiem = getMeridiemText('am');
移除 getMonthArray 方法
getMonthArray 方法已被移除。您可以使用 startOfYear 和 addMonths 方法来重新创建其行为
-const monthArray = adapter.getMonthArray(value);
+const getMonthArray = (year) => {
+ const firstMonth = utils.startOfYear(year);
+ const months = [firstMonth];
+
+ while (months.length < 12) {
+ const prevMonth = months[months.length - 1];
+ months.push(utils.addMonths(prevMonth, 1));
+ }
+
+ return months;
+}
+
+const monthArray = getMonthArray(value);
移除 getNextMonth 方法
getNextMonth 方法已被移除。您可以改为使用 addMonths 方法
-const nextMonth = adapter.getNextMonth(value);
+const nextMonth = adapter.addMonths(value, 1);
移除 getPreviousMonth 方法
getPreviousMonth 方法已被移除。您可以改为使用 addMonths 方法
-const previousMonth = adapter.getPreviousMonth(value);
+const previousMonth = adapter.addMonths(value, -1);
移除 getWeekdays 方法
getWeekdays 方法已被移除。您可以改为使用 startOfWeek 和 addDays 方法
-const weekDays = adapter.getWeekdays(value);
+const getWeekdays = (value) => {
+ const start = adapter.startOfWeek(value);
+ return [0, 1, 2, 3, 4, 5, 6].map((diff) => utils.addDays(start, diff));
+};
+
+const weekDays = getWeekdays(value);
移除 isNull 方法
isNull 方法已被移除。您可以使用非常基本的检查来替换它
-const isNull = adapter.isNull(value);
+const isNull = value === null;
移除 mergeDateAndTime 方法
mergeDateAndTime 方法已被移除。您可以使用 setHours、setMinutes 和 setSeconds 方法来重新创建其行为
-const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime);
+const mergeDateAndTime = <TDate>(
+ dateParam,
+ timeParam,
+ ) => {
+ let mergedDate = dateParam;
+ mergedDate = utils.setHours(mergedDate, utils.getHours(timeParam));
+ mergedDate = utils.setMinutes(mergedDate, utils.getMinutes(timeParam));
+ mergedDate = utils.setSeconds(mergedDate, utils.getSeconds(timeParam));
+
+ return mergedDate;
+ };
+
+const result = mergeDateAndTime(valueWithDate, valueWithTime);
移除 parseISO 方法
parseISO 方法已被移除。您可以直接使用您的日期库
// For Day.js
-const value = adapter.parseISO(isoString);
+const value = dayjs(isoString);
// For Luxon
-const value = adapter.parseISO(isoString);
+const value = DateTime.fromISO(isoString);
// For DateFns
-const value = adapter.parseISO(isoString);
+const value = dateFns.parseISO(isoString);
// For Moment
-const value = adapter.parseISO(isoString);
+const value = moment(isoString, true);
移除 toISO 方法
toISO 方法已被移除。您可以直接使用您的日期库
// For Day.js
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
// For Luxon
-const isoString = adapter.toISO(value);
+const isoString = value.toUTC().toISO({ format: 'extended' });
// For DateFns
-const isoString = adapter.toISO(value);
+const isoString = dateFns.formatISO(value, { format: 'extended' });
// For Moment
-const isoString = adapter.toISO(value);
+const isoString = value.toISOString();
getYearRange 方法过去接受两个参数，现在接受一个元组，以便与 isWithinRange 方法保持一致
-adapter.getYearRange(start, end);
+adapter.getYearRange([start, end])
已修改的方法
显示重大变更
限制 date 方法的输入格式
date 方法现在具有 v6 dateWithTimezone 方法的行为。它不再接受 any 作为值，而只接受 string | null | undefined
-adapter.date(new Date());
+adapter.date();
-adapter.date(new Date('2022-04-17');
+adapter.date('2022-04-17');
-adapter.date(new Date(2022, 3, 17, 4, 5, 34));
+adapter.date('2022-04-17T04:05:34');
-adapter.date(new Date('Invalid Date'));
+adapter.getInvalidDate();
限制 isEqual 方法的输入格式
isEqual 方法过去接受任何类型的值作为其两个输入，并尝试解析它们，然后检查它们是否相等。该方法已简化，现在仅接受已解析的日期或 null（即：选择器中 value 属性使用的相同格式）
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdapterMoment();
// Supported formats
const isEqual = adapterDayjs.isEqual(null, null); // Same for the other adapters
const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
const isEqual = adapterDateFns.isEqual(new Date(), new Date('2022-04-17'));
// Non-supported formats (JS Date)
-const isEqual = adapterDayjs.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterDayjs.isEqual(dayjs(), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterLuxon.isEqual(DateTime.now(), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual(new Date(), new Date('2022-04-17'));
+const isEqual = adapterMoment.isEqual(moment(), moment('2022-04-17'));
// Non-supported formats (string)
-const isEqual = adapterDayjs.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDayjs.isEqual(dayjs('2022-04-17'), dayjs('2022-04-17'));
-const isEqual = adapterLuxon.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterLuxon.isEqual(DateTime.fromISO('2022-04-17'), DateTime.fromISO('2022-04-17'));
-const isEqual = adapterMoment.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterMoment.isEqual(moment('2022-04-17'), moment('2022-04-17'));
-const isEqual = adapterDateFns.isEqual('2022-04-16', '2022-04-17');
+const isEqual = adapterDateFns.isEqual(new Date('2022-04-17'), new Date('2022-04-17'));
限制 isValid 方法的输入格式
isValid 方法过去接受任何类型的值，并尝试解析它们，然后检查其有效性。该方法已简化，现在仅接受已解析的日期或 null。这与组件 value 属性接受的类型相同。
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdapterMoment();
// Supported formats
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
const isValid = adapterLuxon.isValid(DateTime.now());
const isValid = adapterMoment.isValid(moment());
const isValid = adapterDateFns.isValid(new Date());
// Non-supported formats (JS Date)
-const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
// Non-supported formats (string)
-const isValid = adapterDayjs.isValid('2022-04-17');
+const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));
-const isValid = adapterLuxon.isValid('2022-04-17');
+const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));
-const isValid = adapterMoment.isValid('2022-04-17');
+const isValid = adapterMoment.isValid(moment('2022-04-17'));
-const isValid = adapterDateFns.isValid('2022-04-17');
+const isValid = adapterDateFns.isValid(new Date('2022-04-17'));
已移除的内部类型
以下内部类型被错误地导出，并已从公共 API 中移除
UseDateFieldDefaultizedPropsUseTimeFieldDefaultizedPropsUseDateTimeFieldDefaultizedPropsUseSingleInputDateRangeFieldComponentPropsUseSingleInputTimeRangeFieldComponentPropsUseSingleInputDateTimeRangeFieldComponentProps