從 v6 遷移到 v7
本指南描述了將 Date and Time Pickers 從 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，套件的 peer dependency 版本已更新為 ^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",
執行 codemods
preset-safe codemod 將自動調整您的大部分程式碼，以處理 v7 中的重大變更。您可以執行 v7.0.0/pickers/preset-safe，僅針對 Date and Time Pickers，或執行 v7.0.0/preset-safe，以同時針對其他 MUI X 元件，例如 Data Grid。
您可以選擇 <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>
由這個 codemod 處理的重大變更在螢幕右側的目錄中以 ✅ 表情符號表示。
如果您已應用 v7.0.0/pickers/preset-safe（或 v7.0.0/preset-safe）codemod，則您應該不需要對這些項目採取任何進一步的措施。
所有其他變更都必須手動處理。
重大變更
由於 v7 是一個主要版本，因此它包含一些影響公共 API 的變更。這些變更是為了保持一致性、提高穩定性並為新功能騰出空間而進行的。
捨棄舊版 bundle
所有 MUI X 套件都已移除對 IE 11 的支援。不再包含用於支援 IE 11 等舊瀏覽器的 legacy bundle。
捨棄 Webpack 4 支援
捨棄舊瀏覽器支援也表示我們不再轉換現代瀏覽器原生支援的某些功能 – 例如 Nullish Coalescing 和 Optional Chaining。
Webpack 4 不支援這些功能，因此如果您正在使用 Webpack 4，則需要自行轉換這些功能或升級到 Webpack 5。
以下是如何在 Webpack 4 上使用 @babel/preset-env preset 轉換這些功能的範例
// 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'),
+ ],
+ },
+ ],
},
],
},
});
元件 slots
將 components 重新命名為 slots
components 和 componentsProps props 分別重新命名為 slots 和 slotProps props。這是 MUI 維護的所有不同程式庫之間緩慢且持續的努力。為了順利過渡，它們在 v6 期間已被棄用。並從 v7 中移除。
如果尚未完成，此修改可以由 codemod 處理
npx @mui/x-codemod@latest v7.0.0/pickers/ <path>
查看 RFC 以取得更多資訊。
✅ 重新命名 slots 類型
slot 介面已重新命名，以符合 @mui/base 命名慣例。後綴 SlotsComponent 被 Slots 取代，而 SlotsComponentsProps 被 SlotProps 取代。如果您不依賴 codemod，請考慮查看 此檔案 中的所有重新命名類型。以下是 DateCalendar 類型的範例。
-DateCalendarSlotsComponent
+DateCalendarSlots
-DateCalendarSlotsComponentsProps
+DateCalendarSlotProps
將新參數新增至 shortcuts slot onChange 回調
選擇 shortcut 時觸發的 onChange 回調現在需要兩個新參數（以前它們是可選的）
- shortcut 的
changeImportance。 - 包含整個 shortcut 物件的
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 slot 的匯入
與 calendarHeader slot 相關的匯入已從 @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';
已移除的 props
將 shouldDisableClock 替換為 shouldDisableTime
已棄用的 shouldDisableClock prop 已被移除，取而代之的是更靈活的 shouldDisableTime prop。shouldDisableClock prop 接收 value 作為小時、分鐘或秒的 number。相反，shouldDisableTime prop 接收日期物件（基於使用的 adapter）。您可以在 v6 遷移指南 中閱讀有關此 prop 棄用的更多資訊。
<DateTimePicker
- shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+ shouldDisableTime={(value, view) => view === 'hours' && value.hour() < 12}
/>
✅ 將 defaultCalendarMonth 替換為 referenceDate
已棄用的 defaultCalendarMonth prop 已被移除，取而代之的是更靈活的 referenceDate prop。
-<DateCalendar defaultCalendarMonth={dayjs('2022-04-01')};
+<DateCalendar referenceDate={dayjs('2022-04-01')} />
已修改的 props
移除 dayOfWeekFormatter prop 的字串引數
dayOfWeekFormatter prop 的字串引數已被日期物件取代，以允許更大的靈活性。
<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')}.`}
/>
日期相關 props 的嚴格類型檢查
所有日期相關的 props 現在都經過嚴格類型檢查，僅接受您的 adapter 支援的日期格式（date-fns 的 Date 物件、days-js 的 daysjs.Dayjs 物件等）。
Field 元件
更新 selectedSections 的格式
selectedSections prop 不再接受開始和結束索引。當選擇幾個 — 但不是全部 — 區段時，field 元件的行為不正確，您現在只能選擇一個或所有區段
<DateField
- selectedSections={{ startIndex: 0, endIndex: 0 }}
+ selectedSections={0}
// If the field has 3 sections
- selectedSections={{ startIndex: 0, endIndex: 2 }}
+ selectedSections="all"
/>
替換區段 hasLeadingZeros 屬性
屬性 hasLeadingZeros 已從區段中移除，取而代之的是更精確的 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} />;
Headless fields
將 inputRef 移至傳遞給 hook 的 props 內部
field hooks 現在只接收 props，而不是包含 props 和 inputRef 的物件。
-const { inputRef, ...otherProps } = props
-const fieldResponse = useDateField({ props: otherProps, inputRef });
+const fieldResponse = useDateField(props);
如果您正在使用多個輸入範圍 field 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 元素）一起使用時，field hooks 會傳回需要傳遞到 <input /> 元素的 ref。此 ref 之前名為 ref，為了更清晰起見，已重新命名為 inputRef。
const fieldResponse = useDateField(props);
- return <input ref={fieldResponse.ref} />
+ return <input ref={fieldResponse.inputRef} />
如果您正在使用多個輸入範圍 field 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 參數。
您現在應該能夠直接將 field 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 prop 轉發到 DOM
headless field hooks（例如：useDateField）現在傳回一個名為 enableAccessibleFieldDOMStructure 的新 prop。這用於了解目前的 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 與其他 adapters 的行為保持一致。
如果您希望即使您的 locale 另有說明，也將每週的第一天保持在星期一。您可以按如下方式硬編碼週設定
import { Settings, Info } from 'luxon';
Settings.defaultWeekSettings = {
firstDay: 1,
minimalDays: Info.getMinimumDaysInFirstWeek(),
weekend: Info.getWeekendWeekdays(),
};
移除 monthAndYear 格式
已移除 monthAndYear 格式。它用於日曆視圖的標頭中。您可以將其替換為 calendarHeader slot 的新 format prop
<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 一起使用
將 UTC 與 Day.js adapter 一起使用
LocalizationProvider 的 dateLibInstance prop 不再適用於 AdapterDayjs。在元件中實作適當的時區支援之前，此 prop 用於將 pickers 設定為 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 建構函式。這允許使用者在 adapter 使用此 plugin 之前將自訂選項傳遞給它。
如果您在第一個 LocalizationProvider 元件的渲染之前使用此 plugin，並且未在您自己的程式碼庫中呼叫 dayjs.extend，則您需要手動擴展 dayjs
import dayjs from 'dayjs';
import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormatPlugin);
其他 plugins 仍然在 adapter 初始化之前新增。
移除根層級 locales 匯出
locales 匯出已從套件的根目錄中移除。為了減小 bundle 大小，locales 現在僅可從 @mui/x-date-pickers/locales 或 @mui/x-date-pickers-pro/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 的實作，以了解如何自行組合渲染器。
Adapters 內部變更
已移除的方法
顯示重大變更
移除 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（即：pickers 中 value prop 使用的相同格式）
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 prop 接受的類型相同。
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