From 54c210a611a2a3124d10e4d37b9ac791279a903b Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 23 Oct 2023 11:07:50 +0200 Subject: [PATCH 01/12] [pickers] Remove the deprecated methods and formats from the adapters --- .../date-pickers/localization-provider.json | 2 +- .../DateRangeCalendar/DateRangeCalendar.tsx | 5 +- .../AdapterDateFns/AdapterDateFns.test.tsx | 19 --- .../src/AdapterDateFns/AdapterDateFns.ts | 103 ------------- .../AdapterDateFnsJalali.test.tsx | 4 - .../AdapterDateFnsJalali.ts | 104 -------------- .../src/AdapterDayjs/AdapterDayjs.test.tsx | 15 -- .../src/AdapterDayjs/AdapterDayjs.ts | 62 -------- .../src/AdapterLuxon/AdapterLuxon.test.tsx | 10 -- .../src/AdapterLuxon/AdapterLuxon.ts | 73 ---------- .../src/AdapterMoment/AdapterMoment.test.tsx | 29 ---- .../src/AdapterMoment/AdapterMoment.ts | 68 --------- .../AdapterMomentHijri.test.tsx | 4 - .../AdapterMomentHijri/AdapterMomentHijri.ts | 33 ----- .../AdapterMomentJalaali.test.tsx | 4 - .../AdapterMomentJalaali.ts | 37 ----- .../DateCalendar/tests/DateCalendar.test.tsx | 13 -- .../src/DigitalClock/DigitalClock.tsx | 6 +- .../LocalizationProvider.tsx | 6 - .../PickersCalendarHeader.tsx | 9 +- .../x-date-pickers/src/models/adapters.ts | 135 ------------------ scripts/x-date-pickers-pro.exports.json | 1 - scripts/x-date-pickers.exports.json | 1 - .../testCalculations.ts | 128 +---------------- .../describeGregorianAdapter/testFormat.ts | 1 - .../testLocalization.ts | 23 --- .../describeHijriAdapter/testCalculations.ts | 24 ---- .../describeHijriAdapter/testLocalization.ts | 12 -- .../describeJalaliAdapter/testCalculations.ts | 106 -------------- .../describeJalaliAdapter/testLocalization.ts | 12 -- 30 files changed, 18 insertions(+), 1031 deletions(-) diff --git a/docs/pages/x/api/date-pickers/localization-provider.json b/docs/pages/x/api/date-pickers/localization-provider.json index dc0fdf7dc3b6..f4febc9efca5 100644 --- a/docs/pages/x/api/date-pickers/localization-provider.json +++ b/docs/pages/x/api/date-pickers/localization-provider.json @@ -5,7 +5,7 @@ "dateFormats": { "type": { "name": "shape", - "description": "{ dayOfMonth?: string, fullDate?: string, fullDateTime?: string, fullDateTime12h?: string, fullDateTime24h?: string, fullDateWithWeekday?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthAndDate?: string, monthAndYear?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" + "description": "{ dayOfMonth?: string, fullDate?: string, fullTime?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }" } }, "dateLibInstance": { "type": { "name": "any" } }, diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index 77881240d36d..62b77c387702 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -555,7 +555,10 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( slots={slots} slotProps={slotProps} > - {utils.format(visibleMonths[month], 'monthAndYear')} + {`${utils.format(visibleMonths[month], 'month')} ${utils.format( + visibleMonths[month], + 'year', + )}`} )} diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx index ae997c105d71..56a002e1906f 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx @@ -28,12 +28,6 @@ describe('', () => { const adapter = new AdapterDateFns({ locale: enUS }); const date = adapter.date(TEST_DATE_ISO_STRING)!; - // TODO v7: can be removed after v7 release - it('getWeekdays: should start on Sunday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']); - }); - it('getWeekArray: should start on Sunday', () => { const result = adapter.getWeekArray(date); expect(adapter.formatByString(result[0][0], 'EEEEEE')).to.equal('Su'); @@ -47,11 +41,6 @@ describe('', () => { describe('Russian', () => { const adapter = new AdapterDateFns({ locale: ru }); - it('getWeekDays: should start on Monday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']); - }); - it('getWeekArray: should start on Monday', () => { const date = adapter.date(TEST_DATE_ISO_STRING)!; const result = adapter.getWeekArray(date); @@ -83,14 +72,6 @@ describe('', () => { }; expectDate('fullDate', 'Feb 1, 2020', '1 фев. 2020 г.'); - expectDate( - 'fullDateWithWeekday', - 'Saturday, February 1st, 2020', - 'суббота, 1 февраля 2020 г.', - ); - expectDate('fullDateTime', 'Feb 1, 2020 11:44 PM', '1 фев. 2020 г. 23:44'); - expectDate('fullDateTime12h', 'Feb 1, 2020 11:44 PM', '1 фев. 2020 г. 11:44 ПП'); - expectDate('fullDateTime24h', 'Feb 1, 2020 23:44', '1 фев. 2020 г. 23:44'); expectDate('keyboardDate', '02/01/2020', '01.02.2020'); expectDate('keyboardDateTime', '02/01/2020 11:44 PM', '01.02.2020 23:44'); expectDate('keyboardDateTime12h', '02/01/2020 11:44 PM', '01.02.2020 11:44 ПП'); diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts index 7b1f5b053382..0188b389384d 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts @@ -6,16 +6,6 @@ import addHours from 'date-fns/addHours'; import addWeeks from 'date-fns/addWeeks'; import addMonths from 'date-fns/addMonths'; import addYears from 'date-fns/addYears'; -import differenceInYears from 'date-fns/differenceInYears'; -import differenceInQuarters from 'date-fns/differenceInQuarters'; -import differenceInMonths from 'date-fns/differenceInMonths'; -import differenceInWeeks from 'date-fns/differenceInWeeks'; -import differenceInDays from 'date-fns/differenceInDays'; -import differenceInHours from 'date-fns/differenceInHours'; -import differenceInMinutes from 'date-fns/differenceInMinutes'; -import differenceInSeconds from 'date-fns/differenceInSeconds'; -import differenceInMilliseconds from 'date-fns/differenceInMilliseconds'; -import eachDayOfInterval from 'date-fns/eachDayOfInterval'; import endOfDay from 'date-fns/endOfDay'; import endOfWeek from 'date-fns/endOfWeek'; import endOfYear from 'date-fns/endOfYear'; @@ -50,8 +40,6 @@ import startOfMonth from 'date-fns/startOfMonth'; import endOfMonth from 'date-fns/endOfMonth'; import startOfWeek from 'date-fns/startOfWeek'; import startOfYear from 'date-fns/startOfYear'; -import parseISO from 'date-fns/parseISO'; -import formatISO from 'date-fns/formatISO'; import isWithinInterval from 'date-fns/isWithinInterval'; import defaultLocale from 'date-fns/locale/en-US'; // @ts-ignore @@ -59,7 +47,6 @@ import longFormatters from 'date-fns/_lib/format/longFormatters'; import { AdapterFormats, AdapterOptions, - AdapterUnits, DateBuilderReturnType, FieldFormatTokenMap, MuiPickersAdapter, @@ -146,21 +133,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'PP', - fullDateWithWeekday: 'PPPP', keyboardDate: 'P', shortDate: 'MMM d', normalDate: 'd MMMM', normalDateWithWeekday: 'EEE, MMM d', - monthAndYear: 'LLLL yyyy', - monthAndDate: 'MMMM d', fullTime: 'p', fullTime12h: 'hh:mm aa', fullTime24h: 'HH:mm', - fullDateTime: 'PP p', - fullDateTime12h: 'PP hh:mm aa', - fullDateTime24h: 'PP HH:mm', keyboardDateTime: 'P p', keyboardDateTime12h: 'P hh:mm aa', keyboardDateTime24h: 'P HH:mm', @@ -241,14 +222,6 @@ export class AdapterDateFns implements MuiPickersAdapter { return value; }; - public parseISO = (isoString: string) => { - return parseISO(isoString); - }; - - public toISO = (value: Date) => { - return formatISO(value, { format: 'extended' }); - }; - public parse = (value: string, format: string) => { if (value === '') { return null; @@ -290,16 +263,6 @@ export class AdapterDateFns implements MuiPickersAdapter { .join(''); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format) - .replace(/(aaa|aa|a)/g, '(a|p)m') - .toLocaleLowerCase(); - }; - - public isNull = (value: Date | null) => { - return value === null; - }; - public isValid = (value: any) => { return isValid(this.date(value)); }; @@ -316,30 +279,6 @@ export class AdapterDateFns implements MuiPickersAdapter { return numberToFormat; }; - public getDiff = (value: Date, comparing: Date | string, unit?: AdapterUnits) => { - switch (unit) { - case 'years': - return differenceInYears(value, this.date(comparing)!); - case 'quarters': - return differenceInQuarters(value, this.date(comparing)!); - case 'months': - return differenceInMonths(value, this.date(comparing)!); - case 'weeks': - return differenceInWeeks(value, this.date(comparing)!); - case 'days': - return differenceInDays(value, this.date(comparing)!); - case 'hours': - return differenceInHours(value, this.date(comparing)!); - case 'minutes': - return differenceInMinutes(value, this.date(comparing)!); - case 'seconds': - return differenceInSeconds(value, this.date(comparing)!); - default: { - return differenceInMilliseconds(value, this.date(comparing)!); - } - } - }; - public isEqual = (value: any, comparing: any) => { if (value === null && comparing === null) { return true; @@ -512,44 +451,6 @@ export class AdapterDateFns implements MuiPickersAdapter { return getDaysInMonth(value); }; - public getNextMonth = (value: Date) => { - return addMonths(value, 1); - }; - - public getPreviousMonth = (value: Date) => { - return addMonths(value, -1); - }; - - public getMonthArray = (value: Date) => { - const firstMonth = startOfYear(value); - const monthArray = [firstMonth]; - - while (monthArray.length < 12) { - const prevMonth = monthArray[monthArray.length - 1]; - monthArray.push(this.getNextMonth(prevMonth)); - } - - return monthArray; - }; - - public mergeDateAndTime = (dateParam: Date, timeParam: Date) => { - return this.setSeconds( - this.setMinutes( - this.setHours(dateParam, this.getHours(timeParam)), - this.getMinutes(timeParam), - ), - this.getSeconds(timeParam), - ); - }; - - public getWeekdays = () => { - const now = new Date(); - return eachDayOfInterval({ - start: startOfWeek(now, { locale: this.locale }), - end: endOfWeek(now, { locale: this.locale }), - }).map((day) => this.formatByString(day, 'EEEEEE')); - }; - public getWeekArray = (value: Date) => { const start = startOfWeek(startOfMonth(value), { locale: this.locale }); const end = endOfWeek(endOfMonth(value), { locale: this.locale }); @@ -587,8 +488,4 @@ export class AdapterDateFns implements MuiPickersAdapter { return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - return ampm === 'am' ? 'AM' : 'PM'; - }; } diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx index 659b57d69672..8423d2c4df23 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx @@ -29,10 +29,6 @@ describe('', () => { }; expectDate('fullDate', '۱۳۹۸، Bahman ۱م'); - expectDate('fullDateWithWeekday', 'شنبه ۱م Bahman ۱۳۹۸'); - expectDate('fullDateTime', '۱۳۹۸، Bahman ۱م، ۱۱:۴۴ بعد از ظهر'); - expectDate('fullDateTime12h', '۱۲ Bahman ۱۱:۴۴ بعد از ظهر'); - expectDate('fullDateTime24h', '۱۲ Bahman ۲۳:۴۴'); expectDate('keyboardDate', '۱۳۹۸/۱۱/۱۲'); expectDate('keyboardDateTime', '۱۳۹۸/۱۱/۱۲ ۲۳:۴۴'); expectDate('keyboardDateTime12h', '۱۳۹۸/۱۱/۱۲ ۱۱:۴۴ بعد از ظهر'); diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts index 542a322b5dd6..7b9c18b628a0 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts @@ -6,21 +6,10 @@ import addDays from 'date-fns-jalali/addDays'; import addWeeks from 'date-fns-jalali/addWeeks'; import addMonths from 'date-fns-jalali/addMonths'; import addYears from 'date-fns-jalali/addYears'; -import differenceInYears from 'date-fns-jalali/differenceInYears'; -import differenceInQuarters from 'date-fns-jalali/differenceInQuarters'; -import differenceInMonths from 'date-fns-jalali/differenceInMonths'; -import differenceInWeeks from 'date-fns-jalali/differenceInWeeks'; -import differenceInDays from 'date-fns-jalali/differenceInDays'; -import differenceInHours from 'date-fns-jalali/differenceInHours'; -import differenceInMinutes from 'date-fns-jalali/differenceInMinutes'; -import differenceInSeconds from 'date-fns-jalali/differenceInSeconds'; -import differenceInMilliseconds from 'date-fns-jalali/differenceInMilliseconds'; -import eachDayOfInterval from 'date-fns-jalali/eachDayOfInterval'; import endOfDay from 'date-fns-jalali/endOfDay'; import endOfWeek from 'date-fns-jalali/endOfWeek'; import endOfYear from 'date-fns-jalali/endOfYear'; import dateFnsFormat from 'date-fns-jalali/format'; -import formatISO from 'date-fns-jalali/formatISO'; import getHours from 'date-fns-jalali/getHours'; import getSeconds from 'date-fns-jalali/getSeconds'; import getMilliseconds from 'date-fns-jalali/getMilliseconds'; @@ -39,7 +28,6 @@ import isSameMonth from 'date-fns-jalali/isSameMonth'; import isSameHour from 'date-fns-jalali/isSameHour'; import isValid from 'date-fns-jalali/isValid'; import dateFnsParse from 'date-fns-jalali/parse'; -import parseISO from 'date-fns-jalali/parseISO'; import setDate from 'date-fns-jalali/setDate'; import setHours from 'date-fns-jalali/setHours'; import setMinutes from 'date-fns-jalali/setMinutes'; @@ -59,7 +47,6 @@ import longFormatters from 'date-fns-jalali/_lib/format/longFormatters'; import { AdapterFormats, AdapterOptions, - AdapterUnits, DateBuilderReturnType, FieldFormatTokenMap, MuiPickersAdapter, @@ -146,17 +133,10 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'PPP', - fullDateWithWeekday: 'PPPP', keyboardDate: 'P', shortDate: 'd MMM', normalDate: 'd MMMM', normalDateWithWeekday: 'EEE, d MMMM', - monthAndYear: 'LLLL yyyy', - monthAndDate: 'd MMMM', - - fullDateTime: 'PPP p', - fullDateTime12h: 'PPP hh:mm aa', - fullDateTime24h: 'PPP HH:mm', fullTime: 'p', fullTime12h: 'hh:mm aaa', @@ -254,14 +234,6 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { - return parseISO(isoString); - }; - - public toISO = (value: Date) => { - return formatISO(value, { format: 'extended' }); - }; - public parse = (value: string, format: string) => { if (value === '') { return null; @@ -302,16 +274,6 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { - return this.expandFormat(format) - .replace(/(aaa|aa|a)/g, '(a|p)m') - .toLocaleLowerCase(); - }; - - public isNull = (value: Date | null) => { - return value === null; - }; - public isValid = (value: any) => { return isValid(this.date(value)); }; @@ -330,30 +292,6 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { - switch (unit) { - case 'years': - return differenceInYears(value, this.date(comparing)!); - case 'quarters': - return differenceInQuarters(value, this.date(comparing)!); - case 'months': - return differenceInMonths(value, this.date(comparing)!); - case 'weeks': - return differenceInWeeks(value, this.date(comparing)!); - case 'days': - return differenceInDays(value, this.date(comparing)!); - case 'hours': - return differenceInHours(value, this.date(comparing)!); - case 'minutes': - return differenceInMinutes(value, this.date(comparing)!); - case 'seconds': - return differenceInSeconds(value, this.date(comparing)!); - default: { - return differenceInMilliseconds(value, this.date(comparing)!); - } - } - }; - public isEqual = (value: any, comparing: any) => { if (value === null && comparing === null) { return true; @@ -526,44 +464,6 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { - return addMonths(value, 1); - }; - - public getPreviousMonth = (value: Date) => { - return addMonths(value, -1); - }; - - public getMonthArray = (value: Date) => { - const firstMonth = startOfYear(value); - const monthArray = [firstMonth]; - - while (monthArray.length < 12) { - const prevMonth = monthArray[monthArray.length - 1]; - monthArray.push(this.getNextMonth(prevMonth)); - } - - return monthArray; - }; - - public mergeDateAndTime = (dateParam: Date, timeParam: Date) => { - return this.setSeconds( - this.setMinutes( - this.setHours(dateParam, this.getHours(timeParam)), - this.getMinutes(timeParam), - ), - this.getSeconds(timeParam), - ); - }; - - public getWeekdays = () => { - const now = new Date(); - return eachDayOfInterval({ - start: startOfWeek(now, { locale: this.locale }), - end: endOfWeek(now, { locale: this.locale }), - }).map((day) => this.formatByString(day, 'EEEEEE')); - }; - public getWeekArray = (value: Date) => { const start = startOfWeek(startOfMonth(value), { locale: this.locale }); const end = endOfWeek(endOfMonth(value), { locale: this.locale }); @@ -601,8 +501,4 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter { - return ampm === 'am' ? 'ق.ظ' : 'ب.ظ'; - }; } diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx index bf10b9c81c51..72e0b3fc6f9b 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx @@ -52,12 +52,6 @@ describe('', () => { const adapter = new AdapterDayjs({ locale: 'en' }); const date = adapter.date(TEST_DATE_ISO_STRING)!; - // TODO v7: can be removed after v7 release - it('getWeekdays: should start on Sunday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']); - }); - it('getWeekArray: should start on Sunday', () => { const result = adapter.getWeekArray(date); expect(result[0][0].format('dd')).to.equal('Su'); @@ -71,11 +65,6 @@ describe('', () => { describe('Russian', () => { const adapter = new AdapterDayjs({ locale: 'ru' }); - it('getWeekDays: should start on Monday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']); - }); - it('getWeekArray: should start on Monday', () => { const date = adapter.date(TEST_DATE_ISO_STRING)!; const result = adapter.getWeekArray(date); @@ -107,10 +96,6 @@ describe('', () => { }; expectDate('fullDate', 'Feb 1, 2020', '1 февр. 2020 г.'); - expectDate('fullDateWithWeekday', 'Saturday, February 1, 2020', 'суббота, 1 февраля 2020 г.'); - expectDate('fullDateTime', 'Feb 1, 2020 11:44 PM', '1 февр. 2020 г., 23:44'); - expectDate('fullDateTime12h', 'Feb 1, 2020 11:44 PM', '1 февр. 2020 г. 11:44 вечера'); - expectDate('fullDateTime24h', 'Feb 1, 2020 23:44', '1 февр. 2020 г. 23:44'); expectDate('keyboardDate', '02/01/2020', '01.02.2020'); expectDate('keyboardDateTime', '02/01/2020 11:44 PM', '01.02.2020 23:44'); expectDate('keyboardDateTime12h', '02/01/2020 11:44 PM', '01.02.2020 11:44 вечера'); diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 80d3921829f2..f5a0fc756e30 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -8,7 +8,6 @@ import { FieldFormatTokenMap, MuiPickersAdapter, AdapterFormats, - AdapterUnits, AdapterOptions, PickersTimezone, DateBuilderReturnType, @@ -83,21 +82,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'll', - fullDateWithWeekday: 'dddd, LL', keyboardDate: 'L', shortDate: 'MMM D', normalDate: 'D MMMM', normalDateWithWeekday: 'ddd, MMM D', - monthAndYear: 'MMMM YYYY', - monthAndDate: 'MMMM D', fullTime: 'LT', fullTime12h: 'hh:mm A', fullTime24h: 'HH:mm', - fullDateTime: 'lll', - fullDateTime12h: 'll hh:mm A', - fullDateTime24h: 'll HH:mm', keyboardDateTime: 'L LT', keyboardDateTime12h: 'L hh:mm A', keyboardDateTime24h: 'L HH:mm', @@ -379,14 +372,6 @@ export class AdapterDayjs implements MuiPickersAdapter { return value.toDate(); }; - public parseISO = (isoString: string) => { - return this.dayjs(isoString); - }; - - public toISO = (value: Dayjs) => { - return value.toISOString(); - }; - public parse = (value: string, format: string) => { if (value === '') { return null; @@ -427,14 +412,6 @@ export class AdapterDayjs implements MuiPickersAdapter { ); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase(); - }; - - public isNull = (value: Dayjs | null) => { - return value === null; - }; - public isValid = (value: any) => { return this.dayjs(value).isValid(); }; @@ -451,10 +428,6 @@ export class AdapterDayjs implements MuiPickersAdapter { return numberToFormat; }; - public getDiff = (value: Dayjs, comparing: Dayjs | string, unit?: AdapterUnits) => { - return value.diff(comparing, unit as AdapterUnits); - }; - public isEqual = (value: any, comparing: any) => { if (value === null && comparing === null) { return true; @@ -657,37 +630,6 @@ export class AdapterDayjs implements MuiPickersAdapter { return value.daysInMonth(); }; - public getNextMonth = (value: Dayjs) => { - return this.addMonths(value, 1); - }; - - public getPreviousMonth = (value: Dayjs) => { - return this.addMonths(value, -1); - }; - - public getMonthArray = (value: Dayjs) => { - const firstMonth = value.startOf('year'); - const monthArray = [firstMonth]; - - while (monthArray.length < 12) { - const prevMonth = monthArray[monthArray.length - 1]; - monthArray.push(this.addMonths(prevMonth, 1)); - } - - return monthArray; - }; - - public mergeDateAndTime = (dateParam: Dayjs, timeParam: Dayjs) => { - return dateParam.hour(timeParam.hour()).minute(timeParam.minute()).second(timeParam.second()); - }; - - public getWeekdays = () => { - const start = this.dayjs().startOf('week'); - return [0, 1, 2, 3, 4, 5, 6].map((diff) => - this.formatByString(this.addDays(start, diff), 'dd'), - ); - }; - public getWeekArray = (value: Dayjs) => { const cleanValue = this.setLocaleToValue(value); const start = cleanValue.startOf('month').startOf('week'); @@ -727,8 +669,4 @@ export class AdapterDayjs implements MuiPickersAdapter { return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - return ampm === 'am' ? 'AM' : 'PM'; - }; } diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx index c4caf3849737..bfad9dfd1f80 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx @@ -36,12 +36,6 @@ describe('', () => { describe('Russian', () => { const adapter = new AdapterLuxon({ locale: 'ru' }); - // TODO v7: can be removed after v7 release - it('getWeekDays: should start on Monday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['П', 'В', 'С', 'Ч', 'П', 'С', 'В']); - }); - it('getWeekArray: should start on Monday', () => { const date = adapter.date(TEST_DATE_ISO_STRING)!; const result = adapter.getWeekArray(date); @@ -73,10 +67,6 @@ describe('', () => { }; expectDate('fullDate', 'Feb 1, 2020', '1 февр. 2020 г.'); - expectDate('fullDateWithWeekday', 'Saturday, February 1, 2020', 'суббота, 1 февраля 2020 г.'); - expectDate('fullDateTime', 'Feb 1, 2020, 11:44 PM', '1 февр. 2020 г., 23:44'); - expectDate('fullDateTime12h', 'Feb 1, 2020, 11:44 PM', '1 февр. 2020 г., 11:44 PM'); - expectDate('fullDateTime24h', 'Feb 1, 2020, 23:44', '1 февр. 2020 г., 23:44'); expectDate('keyboardDate', '2/1/2020', '01.02.2020'); expectDate('keyboardDateTime', '2/1/2020 11:44 PM', '01.02.2020 23:44'); expectDate('keyboardDateTime12h', '2/1/2020 11:44 PM', '01.02.2020 11:44 PM'); diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts index 8e817cd740ec..37d03bf2413e 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts @@ -3,7 +3,6 @@ import { DateTime, Info } from 'luxon'; import { AdapterFormats, AdapterOptions, - AdapterUnits, DateBuilderReturnType, FieldFormatTokenMap, MuiPickersAdapter, @@ -70,21 +69,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'DD', - fullDateWithWeekday: 'DDDD', keyboardDate: 'D', shortDate: 'MMM d', normalDate: 'd MMMM', normalDateWithWeekday: 'EEE, MMM d', - monthAndYear: 'LLLL yyyy', - monthAndDate: 'MMMM d', fullTime: 't', fullTime12h: 'hh:mm a', fullTime24h: 'HH:mm', - fullDateTime: 'ff', - fullDateTime12h: 'DD, hh:mm a', - fullDateTime24h: 'DD, T', keyboardDateTime: 'D t', keyboardDateTime12h: 'D hh:mm a', keyboardDateTime24h: 'D T', @@ -205,14 +198,6 @@ export class AdapterLuxon implements MuiPickersAdapter { return value.toJSDate(); }; - public parseISO = (isoString: string) => { - return DateTime.fromISO(isoString); - }; - - public toISO = (value: DateTime) => { - return value.toUTC().toISO({ format: 'extended' })!; - }; - public parse = (value: string, formatString: string) => { if (value === '') { return null; @@ -257,14 +242,6 @@ export class AdapterLuxon implements MuiPickersAdapter { ); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase(); - }; - - public isNull = (value: DateTime | null) => { - return value === null; - }; - public isValid = (value: any): boolean => { if (DateTime.isDateTime(value)) { return value.isValid; @@ -289,18 +266,6 @@ export class AdapterLuxon implements MuiPickersAdapter { return numberToFormat; }; - public getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => { - if (typeof comparing === 'string') { - comparing = DateTime.fromJSDate(new Date(comparing)); - } - - if (unit) { - return Math.floor(value.diff(comparing).as(unit)); - } - - return value.diff(comparing).as('millisecond'); - }; - public isEqual = (value: any, comparing: any) => { if (value === null && comparing === null) { return true; @@ -495,38 +460,6 @@ export class AdapterLuxon implements MuiPickersAdapter { return value.daysInMonth!; }; - public getNextMonth = (value: DateTime) => { - return value.plus({ months: 1 }); - }; - - public getPreviousMonth = (value: DateTime) => { - return value.minus({ months: 1 }); - }; - - public getMonthArray = (value: DateTime) => { - const firstMonth = value.startOf('year'); - const monthArray = [firstMonth]; - - while (monthArray.length < 12) { - const prevMonth = monthArray[monthArray.length - 1]; - monthArray.push(this.addMonths(prevMonth, 1)); - } - - return monthArray; - }; - - public mergeDateAndTime = (dateParam: DateTime, timeParam: DateTime) => { - return dateParam.set({ - second: timeParam.second, - hour: timeParam.hour, - minute: timeParam.minute, - }); - }; - - public getWeekdays = () => { - return Info.weekdaysFormat('narrow', { locale: this.locale }); - }; - public getWeekArray = (value: DateTime) => { const cleanValue = this.setLocaleToValue(value); const { days } = cleanValue @@ -570,10 +503,4 @@ export class AdapterLuxon implements MuiPickersAdapter { return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - return Info.meridiems({ locale: this.locale }).find( - (v) => v.toLowerCase() === ampm.toLowerCase(), - )!; - }; } diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx index c592f25d1cb4..9a0eb37020ec 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx @@ -45,12 +45,6 @@ describe('', () => { const adapter = new AdapterMoment({ locale: 'en' }); const date = adapter.date(TEST_DATE_ISO_STRING)!; - // TODO v7: can be removed after v7 release - it('getWeekdays: should start on Monday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']); - }); - it('getWeekArray: week should start on Monday', () => { const result = adapter.getWeekArray(date); expect(result[0][0].format('dd')).to.equal('Su'); @@ -77,11 +71,6 @@ describe('', () => { moment.locale('en'); }); - it('getWeekdays: should start on Monday', () => { - const result = adapter.getWeekdays(); - expect(result).to.deep.equal(['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']); - }); - it('getWeekArray: week should start on Monday', () => { const result = adapter.getWeekArray(date); expect(result[0][0].format('dd')).to.equal('пн'); @@ -111,11 +100,6 @@ describe('', () => { moment.locale('en'); }); - it('getMeridiemText: should translate meridiem format', () => { - expect(adapter.getMeridiemText('am')).to.equal('오전'); - expect(adapter.getMeridiemText('pm')).to.equal('오후'); - }); - it('parse: should have the right locale', () => { expect(adapter.parse('01/01/2020', 'MM/DD/YYYY')!.locale()).to.equal('ko'); }); @@ -137,24 +121,11 @@ describe('', () => { }; expectDate('fullDate', 'Feb 1, 2020', '1 февр. 2020 г.'); - expectDate('fullDateWithWeekday', 'Saturday, February 1, 2020', 'суббота, 1 февраля 2020 г.'); - expectDate('fullDateTime', 'Feb 1, 2020 11:44 PM', '1 февр. 2020 г., 23:44'); - expectDate('fullDateTime12h', 'Feb 1, 2020 11:44 PM', '1 февр. 2020 г. 11:44 вечера'); - expectDate('fullDateTime24h', 'Feb 1, 2020 23:44', '1 февр. 2020 г. 23:44'); expectDate('keyboardDate', '02/01/2020', '01.02.2020'); expectDate('keyboardDateTime', '02/01/2020 11:44 PM', '01.02.2020 23:44'); expectDate('keyboardDateTime12h', '02/01/2020 11:44 PM', '01.02.2020 11:44 вечера'); expectDate('keyboardDateTime24h', '02/01/2020 23:44', '01.02.2020 23:44'); }); - - it('should respect the adapter locale in getWeekdays method even when the current locale is different', () => { - const adapter = new AdapterMoment({ locale: 'fr' }); - moment.locale('de'); - expect(adapter.getWeekdays()[0]).to.equal('lun.'); - - // Reset for the next tests - moment.locale('en'); - }); }); describe('Picker localization', () => { diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts index 084b65ea6cae..06cc03e9e4ef 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts @@ -3,7 +3,6 @@ import defaultMoment, { Moment, LongDateFormatKey } from 'moment'; import { AdapterFormats, AdapterOptions, - AdapterUnits, DateBuilderReturnType, FieldFormatTokenMap, MuiPickersAdapter, @@ -69,21 +68,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'll', - fullDateWithWeekday: 'dddd, LL', keyboardDate: 'L', shortDate: 'MMM D', normalDate: 'D MMMM', normalDateWithWeekday: 'ddd, MMM D', - monthAndYear: 'MMMM YYYY', - monthAndDate: 'MMMM D', fullTime: 'LT', fullTime12h: 'hh:mm A', fullTime24h: 'HH:mm', - fullDateTime: 'lll', - fullDateTime12h: 'll hh:mm A', - fullDateTime24h: 'll HH:mm', keyboardDateTime: 'L LT', keyboardDateTime12h: 'L hh:mm A', keyboardDateTime24h: 'L HH:mm', @@ -290,14 +283,6 @@ export class AdapterMoment implements MuiPickersAdapter { return value.toDate(); }; - public parseISO = (isoString: string) => { - return this.moment(isoString, true); - }; - - public toISO = (value: Moment) => { - return value.toISOString(); - }; - public parse = (value: string, format: string) => { if (value === '') { return null; @@ -337,14 +322,6 @@ export class AdapterMoment implements MuiPickersAdapter { .join(''); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase(); - }; - - public isNull = (value: Moment | null) => { - return value === null; - }; - public isValid = (value: any) => { return this.moment(value).isValid(); }; @@ -363,10 +340,6 @@ export class AdapterMoment implements MuiPickersAdapter { return numberToFormat; }; - public getDiff = (value: Moment, comparing: Moment | string, unit?: AdapterUnits) => { - return value.diff(comparing, unit); - }; - public isEqual = (value: any, comparing: any) => { if (value === null && comparing === null) { return true; @@ -553,36 +526,6 @@ export class AdapterMoment implements MuiPickersAdapter { return value.daysInMonth(); }; - public getNextMonth = (value: Moment) => { - return value.clone().add(1, 'month'); - }; - - public getPreviousMonth = (value: Moment) => { - return value.clone().subtract(1, 'month'); - }; - - public getMonthArray = (value: Moment) => { - const firstMonth = this.startOfYear(value); - const monthArray = [firstMonth]; - - while (monthArray.length < 12) { - const prevMonth = monthArray[monthArray.length - 1]; - monthArray.push(this.getNextMonth(prevMonth)); - } - - return monthArray; - }; - - public mergeDateAndTime = (dateParam: Moment, timeParam: Moment) => { - return dateParam - .clone() - .hour(timeParam.hour()) - .minute(timeParam.minute()) - .second(timeParam.second()); - }; - - public getWeekdays = () => this.syncMomentLocale(() => defaultMoment.weekdaysShort(true)); - public getWeekArray = (value: Moment) => { const cleanValue = this.setLocaleToValue(value); const start = cleanValue.clone().startOf('month').startOf('week'); @@ -621,15 +564,4 @@ export class AdapterMoment implements MuiPickersAdapter { return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - if (this.is12HourCycleInCurrentLocale()) { - // AM/PM translation only possible in those who have 12 hour cycle in locale. - return defaultMoment - .localeData(this.getCurrentLocaleCode()) - .meridiem(ampm === 'am' ? 0 : 13, 0, false); - } - - return ampm === 'am' ? 'AM' : 'PM'; // fallback for de, ru, ...etc - }; } diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx index 9dd52c850bcf..c4bc46bbed37 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx @@ -35,12 +35,10 @@ describe('', () => { expectDate('keyboardDate', '١٤٤١/٠٥/٠٦'); expectDate('fullDate', '١٤٤١، جمادى الأولى ١'); - expectDate('fullDateWithWeekday', '١٤٤١، جمادى الأولى ١، الأربعاء'); expectDate('normalDate', 'الأربعاء، ٦ جمادى ١'); expectDate('shortDate', '٦ جمادى ١'); expectDate('year', '١٤٤١'); expectDate('month', 'جمادى الأولى'); - expectDate('monthAndDate', '٦ جمادى الأولى'); expectDate('weekday', 'الأربعاء'); expectDate('weekdayShort', 'أربعاء'); expectDate('dayOfMonth', '٦'); @@ -50,8 +48,6 @@ describe('', () => { expectDate('hours24h', '٢٣'); expectDate('minutes', '٤٤'); expectDate('seconds', '٠٠'); - expectDate('fullDateTime12h', '٦ جمادى الأولى ١١:٤٤ م'); - expectDate('fullDateTime24h', '٦ جمادى الأولى ٢٣:٤٤'); }); }); diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts index 2a4817562ee3..4ac6affe4857 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts @@ -59,21 +59,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'iYYYY, iMMMM Do', - fullDateWithWeekday: 'iYYYY, iMMMM Do, dddd', keyboardDateTime: 'iYYYY/iMM/iDD LT', shortDate: 'iD iMMM', normalDate: 'dddd, iD iMMM', normalDateWithWeekday: 'DD iMMMM', - monthAndYear: 'iMMMM iYYYY', - monthAndDate: 'iD iMMMM', fullTime: 'LT', fullTime12h: 'hh:mm A', fullTime24h: 'HH:mm', - fullDateTime: 'iYYYY, iMMMM Do, hh:mm A', - fullDateTime12h: 'iD iMMMM hh:mm A', - fullDateTime24h: 'iD iMMMM HH:mm', keyboardDate: 'iYYYY/iMM/iDD', keyboardDateTime12h: 'iYYYY/iMM/iDD hh:mm A', keyboardDateTime24h: 'iYYYY/iMM/iDD HH:mm', @@ -164,15 +158,6 @@ export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapt return this.moment(value, format, true).locale('ar-SA'); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format) - .replace(/a/gi, '(a|p)m') - .replace('iY', 'Y') - .replace('iM', 'M') - .replace('iD', 'D') - .toLocaleLowerCase(); - }; - public formatNumber = (numberToFormat: string) => { return numberToFormat .replace(/\d/g, (match) => NUMBER_SYMBOL_MAP[match as keyof typeof NUMBER_SYMBOL_MAP]) @@ -239,20 +224,6 @@ export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapt return value.clone().iDate(date); }; - public getNextMonth = (value: Moment) => { - return value.clone().add(1, 'iMonth'); - }; - - public getPreviousMonth = (value: Moment) => { - return value.clone().subtract(1, 'iMonth'); - }; - - public getWeekdays = () => { - return [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => { - return this.date()!.weekday(dayOfWeek).format('dd'); - }); - }; - public getWeekArray = (value: Moment) => { const start = value.clone().startOf('iMonth').startOf('week'); @@ -300,8 +271,4 @@ export class AdapterMomentHijri extends AdapterMoment implements MuiPickersAdapt return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - return ampm === 'am' ? this.date()!.hours(2).format('A') : this.date()!.hours(14).format('A'); - }; } diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx index 6f66267176c4..6e32402515a1 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx @@ -43,10 +43,6 @@ describe('', () => { }; expectDate('fullDate', '۱۳۹۸، بهمن ۱م'); - expectDate('fullDateWithWeekday', 'شنبه ۱م بهمن ۱۳۹۸'); - expectDate('fullDateTime', '۱۳۹۸، بهمن ۱م، ۱۱:۴۴ ب.ظ'); - expectDate('fullDateTime12h', '۱۲ بهمن ۱۱:۴۴ ب.ظ'); - expectDate('fullDateTime24h', '۱۲ بهمن ۲۳:۴۴'); expectDate('keyboardDate', '۱۳۹۸/۱۱/۱۲'); expectDate('keyboardDateTime', '۱۳۹۸/۱۱/۱۲ ۲۳:۴۴'); expectDate('keyboardDateTime12h', '۱۳۹۸/۱۱/۱۲ ۱۱:۴۴ ب.ظ'); diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts index 391316fd8041..ad617b9ea81e 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts @@ -58,21 +58,15 @@ const defaultFormats: AdapterFormats = { seconds: 'ss', fullDate: 'jYYYY, jMMMM Do', - fullDateWithWeekday: 'dddd Do jMMMM jYYYY', keyboardDate: 'jYYYY/jMM/jDD', shortDate: 'jD jMMM', normalDate: 'dddd, jD jMMM', normalDateWithWeekday: 'DD MMMM', - monthAndYear: 'jMMMM jYYYY', - monthAndDate: 'jD jMMMM', fullTime: 'LT', fullTime12h: 'hh:mm A', fullTime24h: 'HH:mm', - fullDateTime: 'jYYYY, jMMMM Do, hh:mm A', - fullDateTime12h: 'jD jMMMM hh:mm A', - fullDateTime24h: 'jD jMMMM HH:mm', keyboardDateTime: 'jYYYY/jMM/jDD LT', keyboardDateTime12h: 'jYYYY/jMM/jDD hh:mm A', keyboardDateTime24h: 'jYYYY/jMM/jDD HH:mm', @@ -158,10 +152,6 @@ export class AdapterMomentJalaali return value; }; - public parseISO = (isoString: string) => { - return this.moment(isoString).locale('fa'); - }; - public parse = (value: string, format: string) => { if (value === '') { return null; @@ -170,15 +160,6 @@ export class AdapterMomentJalaali return this.moment(value, format, true).locale('fa'); }; - public getFormatHelperText = (format: string) => { - return this.expandFormat(format) - .replace(/a/gi, '(a|p)m') - .replace('jY', 'Y') - .replace('jM', 'M') - .replace('jD', 'D') - .toLocaleLowerCase(); - }; - public isValid = (value: any) => { // We can't to `this.moment(value)` because moment-jalaali looses the invalidity information when creating a new moment object from an existing one if (!this.moment.isMoment(value)) { @@ -274,20 +255,6 @@ export class AdapterMomentJalaali return value.clone().jDate(date); }; - public getNextMonth = (value: Moment) => { - return value.clone().add(1, 'jMonth'); - }; - - public getPreviousMonth = (value: Moment) => { - return value.clone().subtract(1, 'jMonth'); - }; - - public getWeekdays = () => { - return [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => { - return this.date()!.weekday(dayOfWeek).format('dd'); - }); - }; - public getWeekArray = (value: Moment) => { const start = value.clone().startOf('jMonth').startOf('week'); const end = value.clone().endOf('jMonth').endOf('week'); @@ -325,8 +292,4 @@ export class AdapterMomentJalaali return years; }; - - public getMeridiemText = (ampm: 'am' | 'pm') => { - return ampm === 'am' ? this.date()!.hours(2).format('A') : this.date()!.hours(14).format('A'); - }; } diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index b3f59b807876..6b40c50b8da0 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -103,19 +103,6 @@ describe('', () => { expect(disabledDays.length).to.equal(31); }); - it('should render header label text according to monthAndYear format', () => { - render( - - , - , - ); - - expect(screen.getByText('2019/01')).toBeVisible(); - }); - it('should render column header according to dayOfWeekFormatter', () => { render( diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx index a46ae7790b8b..22486729ff89 100644 --- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx +++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx @@ -301,9 +301,11 @@ export const DigitalClock = React.forwardRef(function DigitalClock !readOnly && handleItemSelect(option)} selected={isSelected} disabled={disabled || isTimeDisabled(option)} @@ -314,7 +316,7 @@ export const DigitalClock = React.forwardRef(function DigitalClock - {utils.format(option, ampm ? 'fullTime12h' : 'fullTime24h')} + {formattedValue} ); })} diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx index f2784c8c3e10..ef8d3f088ca4 100644 --- a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx +++ b/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx @@ -173,10 +173,6 @@ LocalizationProvider.propTypes = { dateFormats: PropTypes.shape({ dayOfMonth: PropTypes.string, fullDate: PropTypes.string, - fullDateTime: PropTypes.string, - fullDateTime12h: PropTypes.string, - fullDateTime24h: PropTypes.string, - fullDateWithWeekday: PropTypes.string, fullTime: PropTypes.string, fullTime12h: PropTypes.string, fullTime24h: PropTypes.string, @@ -189,8 +185,6 @@ LocalizationProvider.propTypes = { meridiem: PropTypes.string, minutes: PropTypes.string, month: PropTypes.string, - monthAndDate: PropTypes.string, - monthAndYear: PropTypes.string, monthShort: PropTypes.string, normalDate: PropTypes.string, normalDateWithWeekday: PropTypes.string, diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index 0ec2ca240771..5086bd635e08 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -287,6 +287,8 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader - + - {utils.format(month, 'monthAndYear')} + {label} {views.length > 1 && !disabled && ( diff --git a/packages/x-date-pickers/src/models/adapters.ts b/packages/x-date-pickers/src/models/adapters.ts index c43bcac5ac5d..d659da78ba0c 100644 --- a/packages/x-date-pickers/src/models/adapters.ts +++ b/packages/x-date-pickers/src/models/adapters.ts @@ -65,12 +65,6 @@ export interface AdapterFormats { * @example "Jan 1, 2019" */ fullDate: string; - /** - * The partially localized full date with weekday, useful for text-to-speech accessibility. - * @example "Tuesday, January 1, 2019" - * @deprecated Never used internally. - */ - fullDateWithWeekday: string; /** * A keyboard input friendly date format. * Used in the date fields. @@ -95,18 +89,6 @@ export interface AdapterFormats { * @example "Sun, Jan 1" */ normalDateWithWeekday: string; - /** - * The month name and the 4-digit year. - * @example "January 2018" - * @deprecated Use `${adapter.formats.month} ${adapter.formats.year}` - */ - monthAndYear: string; - /** - * The month name and the day of the month. - * @example "January 1" - * @deprecated Use `${adapter.formats.month} ${adapter.formats.dayOfMonth}` - */ - monthAndDate: string; // Time formats /** @@ -127,24 +109,6 @@ export interface AdapterFormats { fullTime24h: string; // Date & Time formats - /** - * The combination of `fullDate` and `fullTime` formats. - * @example "Jan 1, 2018 11:44 PM" - * @deprecated Use `${adapter.formats.fullDate} ${adapter.formats.fullTime}` - */ - fullDateTime: string; - /** - * The combination of `fullDate` and `fullTime12h` formats. - * @example "Jan 1, 2018 11:44 PM" - * @deprecated Use `${adapter.formats.fullDate} ${adapter.formats.fullTime12h}` - */ - fullDateTime12h: string; - /** - * The combination of `fullDate` and `fullTime24h` formats. - * @example "Jan 1, 2018 23:44" - * @deprecated Use `${adapter.formats.fullDate} ${adapter.formats.fullTime24h}` - */ - fullDateTime24h: string; /** * A keyboard input friendly time format. * Used in the date-time fields. @@ -165,17 +129,6 @@ export interface AdapterFormats { keyboardDateTime24h: string; } -export type AdapterUnits = - | 'years' - | 'quarters' - | 'months' - | 'weeks' - | 'days' - | 'hours' - | 'minutes' - | 'seconds' - | 'milliseconds'; - export type FieldFormatTokenMap = { [formatToken: string]: | FieldSectionType @@ -265,22 +218,6 @@ export interface MuiPickersAdapter { * @returns {Date} the JavaScript date. */ toJsDate(value: TDate): Date; - /** - * Parse an iso string into a date in the date library format. - * @deprecate Will be removed in v7. - * @template TDate - * @param {string} isoString The iso string to parse. - * @returns {TDate} the parsed date. - */ - parseISO(isoString: string): TDate; - /** - * Stringify a date in the date library format into an ISO string. - * @deprecate Will be removed in v7. - * @template TDate - * @param {TDate} value The date to stringify. - * @returns {string} the iso string representing the date. - */ - toISO(value: TDate): string; /** * Parse a string date in a specific format. * @template TDate @@ -305,21 +242,6 @@ export interface MuiPickersAdapter { * @returns {string} The expanded format. */ expandFormat(format: string): string; - /** - * Create a user readable format (taking into account localized format tokens), useful to render helper text for input (e.g. placeholder). - * @deprecated Will be removed in v7. - * @param {string} format The format to analyze. - * @returns {string} The helper text of the given format. - */ - getFormatHelperText(format: string): string; - /** - * Check if the date is null. - * @deprecated Will be removed in v7. - * @template TDate - * @param {TDate | null} value The date to test. - * @returns {boolean} `true` if the date is null. - */ - isNull(value: TDate | null): boolean; // TODO v7: Type `value` to be `TDate | null` and make sure the `isValid(null)` returns `false`. /** * Check if the date is valid. @@ -350,16 +272,6 @@ export interface MuiPickersAdapter { * @returns {string} The formatted number. */ formatNumber(numberToFormat: string): string; - /** - * Compute the difference between the two dates in the unit provided. - * @deprecated Will be removed in v7. - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate | string} comparing The date to compare with the reference date. - * @param {AdapterUnits} unit The unit in which we want to the result to be. - * @returns {number} The diff between the two dates. - */ - getDiff(value: TDate, comparing: TDate | string, unit?: AdapterUnits): number; // TODO v7: Type `value` and `comparing` to be `TDate | null`. /** * Check if the two dates are equal (e.g: they represent the same timestamp). @@ -685,46 +597,6 @@ export interface MuiPickersAdapter { * @returns {number} The number of days in the month */ getDaysInMonth(value: TDate): number; - /** - * Add one month to the given date. - * @deprecated Use `addMonths(value, 1)` - * @template TDate - * @param {TDate} value The given date. - * @returns {TDate} The new date with one month added. - */ - getNextMonth(value: TDate): TDate; - /** - * Subtract one month from the given date. - * @deprecated Use `addMonths(value, -1)` - * @template TDate - * @param {TDate} value The given date. - * @returns {TDate} The new date with one month subtracted. - */ - getPreviousMonth(value: TDate): TDate; - // TODO: Inline the logic in a utility function using `addMonths`, we don't need one method per adapter. - /** - * Get an array with all the months in the year of the given date. - * @deprecated Will be removed in v7. - * @template TDate - * @param {TDate} value The given date. - * @returns {TDate[]} All the months in the year of the given date. - */ - getMonthArray(value: TDate): TDate[]; - /** - * Create a date with the date of the first param and the time of the second param. - * @deprecated Use `adapter.setHours`, `adapter.setMinutes` and `adapter.setSeconds`. - * @template TDate - * @param {TDate} dateParam Param from which we want to get the date. - * @param {TDate} timeParam Param from which we want to get the time. - * @returns Date with the date of the first param and the time of the second param. - */ - mergeDateAndTime(dateParam: TDate, timeParam: TDate): TDate; - /** - * Get the label of each day of a week. - * @deprecated Will be removed in v7. Use `getWeekdays` from date-utils and format the dates. - * @returns {string[]} The label of each day of a week. - */ - getWeekdays(): string[]; /** * Create a nested list with all the days of the month of the given date grouped by week. * @template TDate @@ -748,11 +620,4 @@ export interface MuiPickersAdapter { * @returns {TDate[]} List of all the years between the start end the end date. */ getYearRange(start: TDate, end: TDate): TDate[]; - /** - * Allow to customize how the "am"` and "pm" strings are rendered. - * @deprecated Use `utils.format(utils.setHours(utils.date()!, meridiem === 'am' ? 2 : 14), 'meridiem')` instead. - * @param {"am" | "pm"} meridiem The string to render. - * @return {string} The formatted string. - */ - getMeridiemText(meridiem: 'am' | 'pm'): string; } diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 42f2f6b4027b..f6c0efeb64f2 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -1,7 +1,6 @@ [ { "name": "AdapterFormats", "kind": "Interface" }, { "name": "AdapterOptions", "kind": "TypeAlias" }, - { "name": "AdapterUnits", "kind": "TypeAlias" }, { "name": "ArrowDropDownIcon", "kind": "Variable" }, { "name": "ArrowLeftIcon", "kind": "Variable" }, { "name": "ArrowRightIcon", "kind": "Variable" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 08052f41bf95..7ec1ff503397 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -1,7 +1,6 @@ [ { "name": "AdapterFormats", "kind": "Interface" }, { "name": "AdapterOptions", "kind": "TypeAlias" }, - { "name": "AdapterUnits", "kind": "TypeAlias" }, { "name": "ArrowDropDownIcon", "kind": "Variable" }, { "name": "ArrowLeftIcon", "kind": "Variable" }, { "name": "ArrowRightIcon", "kind": "Variable" }, diff --git a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts index 00969e3f0d85..8ab90d8f1286 100644 --- a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts +++ b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts @@ -123,12 +123,15 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ } }); - it('should parse undefined', () => { + it.only('should parse undefined', () => { + if (adapterTZ.lib !== 'dayjs') { + return; + } + if (adapter.isTimezoneCompatible) { const testTodayZone = (timezone: PickersTimezone) => { const dateWithZone = adapterTZ.dateWithTimezone(undefined, timezone); expect(adapterTZ.getTimezone(dateWithZone)).to.equal(timezone); - expect(adapterTZ.getDiff(dateWithZone, adapterTZ.date(new Date())!)).to.be.lessThan(5); expect(Math.abs(adapterTZ.toJsDate(dateWithZone).getTime() - Date.now())).to.be.lessThan( 5, ); @@ -208,21 +211,6 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ expect(adapter.toJsDate(testDateLocale)).to.be.instanceOf(Date); }); - it('Method: parseISO', () => { - expect(adapter.parseISO(TEST_DATE_ISO_STRING)).toEqualDateTime(testDateIso); - }); - - it('Method: toISO', () => { - const outputtedISO = adapter.toISO(testDateIso); - - if (adapter.lib === 'date-fns') { - // date-fns never suppress useless milliseconds in the end - expect(outputtedISO).to.equal(TEST_DATE_ISO_STRING.replace('.000Z', 'Z')); - } else { - expect(outputtedISO).to.equal(TEST_DATE_ISO_STRING); - } - }); - it('Method: parse', () => { // Date time expect(adapter.parse('10/30/2018 11:44', adapter.formats.keyboardDateTime24h)).toEqualDateTime( @@ -243,12 +231,6 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ ); }); - it('Method: isNull', () => { - expect(adapter.isNull(null)).to.equal(true); - expect(adapter.isNull(testDateIso)).to.equal(false); - expect(adapter.isNull(testDateLocale)).to.equal(false); - }); - it('Method: isValid', () => { const invalidDate = adapter.date('2018-42-30T11:60:00.000Z'); @@ -260,69 +242,6 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ expect(adapter.isValid('2018-42-30T11:60:00.000Z')).to.equal(false); }); - describe('Method: getDiff', () => { - it('should compute the millisecond diff when there is no unit', () => { - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-29T11:44:00.000Z')!)).to.equal( - 86400000, - ); - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-31T11:44:00.000Z')!)).to.equal( - -86400000, - ); - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-31T11:44:00.000Z')!)).to.equal( - -86400000, - ); - }); - - it('should compute the diff in the provided unit (ISO)', () => { - expect( - adapter.getDiff(testDateIso, adapter.date('2017-09-29T11:44:00.000Z')!, 'years'), - ).to.equal(1); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-08-29T11:44:00.000Z')!, 'months'), - ).to.equal(2); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-05-29T11:44:00.000Z')!, 'quarters'), - ).to.equal(1); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'days'), - ).to.equal(31); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'weeks'), - ).to.equal(4); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'hours'), - ).to.equal(744); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'minutes'), - ).to.equal(44640); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-10-30T10:44:00.000Z')!, 'seconds'), - ).to.equal(3600); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-10-30T10:44:00.000Z')!, 'milliseconds'), - ).to.equal(3600000); - }); - - it('should compute the diff in the provided unit (locale)', () => { - expect(adapter.getDiff(testDateLocale, adapter.date('2017-09-29')!, 'years')).to.equal(1); - expect(adapter.getDiff(testDateLocale, adapter.date('2018-08-29')!, 'months')).to.equal(2); - expect(adapter.getDiff(testDateLocale, adapter.date('2018-05-29')!, 'quarters')).to.equal(1); - expect(adapter.getDiff(testDateLocale, adapter.date('2018-09-29')!, 'days')).to.equal(31); - expect(adapter.getDiff(testDateLocale, adapter.date('2018-09-29')!, 'weeks')).to.equal(4); - }); - - it('should compute the diff with string "comparing" param', () => { - expect(adapter.getDiff(testDateLocale, '2017-09-29', 'years')).to.equal(1); - expect(adapter.getDiff(testDateLocale, '2018-08-29', 'months')).to.equal(2); - expect(adapter.getDiff(testDateLocale, '2018-05-29', 'quarters')).to.equal(1); - expect(adapter.getDiff(testDateLocale, '2018-09-29', 'days')).to.equal(31); - expect(adapter.getDiff(testDateLocale, '2018-09-29', 'weeks')).to.equal(4); - }); - }); - describe('Method: isEqual', () => { it('should work in the same timezone', () => { expect(adapter.isEqual(adapter.date(null), null)).to.equal(true); @@ -919,43 +838,6 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ expect(adapter.getDaysInMonth(adapter.addMonths(testDateIso, 1))).to.equal(30); }); - it('Method: getNextMonth', () => { - expect(adapter.getNextMonth(testDateIso)).toEqualDateTime('2018-11-30T11:44:00.000Z'); - }); - - it('Method: getPreviousMonth', () => { - expect(adapter.getPreviousMonth(testDateIso)).toEqualDateTime('2018-09-30T11:44:00.000Z'); - }); - - it('Method: getMonthArray', () => { - const monthArray = adapter.getMonthArray(testDateIso); - let expectedDate = adapter.date('2018-01-01T00:00:00.000Z')!; - - monthArray.forEach((month) => { - expect(month).toEqualDateTime(expectedDate); - expectedDate = adapter.addMonths(expectedDate, 1)!; - }); - }); - - it('Method: mergeDateAndTime', () => { - const mergedDate = adapter.mergeDateAndTime( - testDateIso, - adapter.date('2018-01-01T14:15:16.000Z')!, - ); - - expect(adapter.toJsDate(mergedDate)).toEqualDateTime('2018-10-30T14:15:16.000Z'); - }); - - it('Method: getWeekdays', () => { - const weekDays = adapter.getWeekdays(); - let date = adapter.startOfWeek(testDateIso); - - weekDays.forEach((dayLabel) => { - expect(adapter.format(date, 'weekday').startsWith(dayLabel)).to.equal(true); - date = adapter.addDays(date, 1); - }); - }); - describe('Method: getWeekArray', () => { it('should work without timezones', () => { const weekArray = adapter.getWeekArray(testDateIso); diff --git a/test/utils/pickers/describeGregorianAdapter/testFormat.ts b/test/utils/pickers/describeGregorianAdapter/testFormat.ts index a4704990456b..f616ac3bbfba 100644 --- a/test/utils/pickers/describeGregorianAdapter/testFormat.ts +++ b/test/utils/pickers/describeGregorianAdapter/testFormat.ts @@ -16,7 +16,6 @@ export const testFormat: DescribeGregorianAdapterTestSuite = ({ adapter }) => { expectDate('shortDate', 'Jan 1'); expectDate('year', '2020'); expectDate('month', 'January'); - expectDate('monthAndDate', 'January 1'); expectDate('weekday', 'Wednesday'); expectDate('weekdayShort', 'Wed'); expectDate('dayOfMonth', '1'); diff --git a/test/utils/pickers/describeGregorianAdapter/testLocalization.ts b/test/utils/pickers/describeGregorianAdapter/testLocalization.ts index a91329b6598e..c730a34f7614 100644 --- a/test/utils/pickers/describeGregorianAdapter/testLocalization.ts +++ b/test/utils/pickers/describeGregorianAdapter/testLocalization.ts @@ -1,5 +1,4 @@ import { expect } from 'chai'; -import { stub } from 'sinon'; import { AdapterFormats } from '@mui/x-date-pickers/models'; import { cleanText } from 'test/utils/pickers'; import { DescribeGregorianAdapterTestSuite } from './describeGregorianAdapter.types'; @@ -12,19 +11,6 @@ export const testLocalization: DescribeGregorianAdapterTestSuite = ({ adapter }) expect(adapter.formatNumber('1')).to.equal('1'); }); - it('Method: getMeridiemText', () => { - expect(adapter.getMeridiemText('am')).to.equal('AM'); - expect(adapter.getMeridiemText('pm')).to.equal('PM'); - - // Moment only translates for 12-hour cycle. - if (adapter.lib === 'moment') { - const sinonStub = stub(adapter, 'is12HourCycleInCurrentLocale').returns(false); - expect(adapter.getMeridiemText('am')).to.equal('AM'); - expect(adapter.getMeridiemText('pm')).to.equal('PM'); - sinonStub.restore(); - } - }); - it('Method: expandFormat', () => { const testFormat = (formatKey: keyof AdapterFormats) => { const formatString = adapter.formats[formatKey]; @@ -48,15 +34,6 @@ export const testLocalization: DescribeGregorianAdapterTestSuite = ({ adapter }) }); }); - it('Method: getFormatHelperText', () => { - expect(adapter.getFormatHelperText(adapter.formats.keyboardDate)).to.equal( - adapter.lib === 'luxon' ? 'm/d/yyyy' : 'mm/dd/yyyy', - ); - expect(adapter.getFormatHelperText(adapter.formats.keyboardDateTime12h)).to.equal( - adapter.lib === 'luxon' ? 'm/d/yyyy hh:mm (a|p)m' : 'mm/dd/yyyy hh:mm (a|p)m', - ); - }); - it('Method: getCurrentLocaleCode', () => { // Returns the default locale expect(adapter.getCurrentLocaleCode()).to.match(/en/); diff --git a/test/utils/pickers/describeHijriAdapter/testCalculations.ts b/test/utils/pickers/describeHijriAdapter/testCalculations.ts index 5f97a06a8e1f..a60ee76d786d 100644 --- a/test/utils/pickers/describeHijriAdapter/testCalculations.ts +++ b/test/utils/pickers/describeHijriAdapter/testCalculations.ts @@ -148,30 +148,6 @@ export const testCalculations: DescribeHijriAdapterTestSuite = ({ adapter }) => expect(adapter.setDate(testDateIso, 22)).toEqualDateTime('2018-10-31T11:44:00.000Z'); }); - it('Method: getNextMonth', () => { - expect(adapter.getNextMonth(testDateIso)).toEqualDateTime('2018-11-29T11:44:00.000Z'); - }); - - it('Method: getPreviousMonth', () => { - expect(adapter.getPreviousMonth(testDateIso)).toEqualDateTime( - new Date('2018-10-01T11:44:00.000Z'), - ); - }); - - it('Method: getMonthArray', () => { - const monthArray = adapter.getMonthArray(testDateIso); - let expectedDate = adapter.date('2018-09-11T00:00:00.000Z')!; - - monthArray.forEach((month) => { - expect(month).toEqualDateTime(expectedDate); - expectedDate = adapter.addMonths(expectedDate, 1)!; - }); - }); - - it('Method: getWeekdays', () => { - expect(adapter.getWeekdays()).to.deep.equal(['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س']); - }); - it('Method: getWeekArray', () => { const weekArray = adapter.getWeekArray(testDateIso); const expectedDate = new Date('2018-10-07T00:00:00.000Z'); diff --git a/test/utils/pickers/describeHijriAdapter/testLocalization.ts b/test/utils/pickers/describeHijriAdapter/testLocalization.ts index 524c31fd3228..8bb296ea9c6a 100644 --- a/test/utils/pickers/describeHijriAdapter/testLocalization.ts +++ b/test/utils/pickers/describeHijriAdapter/testLocalization.ts @@ -7,18 +7,6 @@ export const testLocalization: DescribeHijriAdapterTestSuite = ({ adapter }) => expect(adapter.formatNumber('2')).to.equal('٢'); }); - it('Method: getMeridiemText', () => { - expect(adapter.getMeridiemText('am')).to.equal('ص'); - expect(adapter.getMeridiemText('pm')).to.equal('م'); - }); - - it('Method: getFormatHelperText', () => { - expect(adapter.getFormatHelperText(adapter.formats.keyboardDate)).to.equal('yyyy/mm/dd'); - expect(adapter.getFormatHelperText(adapter.formats.keyboardDateTime12h)).to.equal( - 'yyyy/mm/dd hh:mm (a|p)m', - ); - }); - it('Method: getCurrentLocaleCode', () => { // Returns the default locale expect(adapter.getCurrentLocaleCode()).to.match(/ar/); diff --git a/test/utils/pickers/describeJalaliAdapter/testCalculations.ts b/test/utils/pickers/describeJalaliAdapter/testCalculations.ts index 6e35e987851d..839c907aca1a 100644 --- a/test/utils/pickers/describeJalaliAdapter/testCalculations.ts +++ b/test/utils/pickers/describeJalaliAdapter/testCalculations.ts @@ -14,73 +14,6 @@ export const testCalculations: DescribeJalaliAdapterTestSuite = ({ adapter }) => expect(adapter.parse('01/01/1395', adapter.formats.keyboardDate)).not.to.equal(null); }); - it('Method: parseISO', () => { - expect(adapter.parseISO(TEST_DATE_ISO_STRING)).toEqualDateTime(testDateIso); - }); - - it('Method: toISO', () => { - const outputtedISO = adapter.toISO(testDateIso); - - if (adapter.lib === 'date-fns-jalali') { - // date-fns never suppress useless milliseconds in the end - expect(outputtedISO).to.equal(TEST_DATE_ISO_STRING.replace('.000Z', 'Z')); - } else { - expect(outputtedISO).to.equal(TEST_DATE_ISO_STRING); - } - }); - - it('Method: isNull', () => { - expect(adapter.isNull(null)).to.equal(true); - expect(adapter.isNull(testDateIso)).to.equal(false); - }); - - describe('Method: getDiff', () => { - it('should compute the millisecond diff when there is no unit', () => { - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-29T11:44:00.000Z')!)).to.equal( - 86400000, - ); - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-31T11:44:00.000Z')!)).to.equal( - -86400000, - ); - expect(adapter.getDiff(testDateIso, adapter.date('2018-10-31T11:44:00.000Z')!)).to.equal( - -86400000, - ); - }); - - it('should compute the diff in the provided unit (ISO)', () => { - expect( - adapter.getDiff(testDateIso, adapter.date('2017-09-29T11:44:00.000Z')!, 'years'), - ).to.equal(1); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-08-29T11:44:00.000Z')!, 'months'), - ).to.equal(2); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-05-29T11:44:00.000Z')!, 'quarters'), - ).to.equal(1); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'days'), - ).to.equal(31); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'weeks'), - ).to.equal(4); - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'hours'), - ).to.equal(744); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-09-29T11:44:00.000Z')!, 'minutes'), - ).to.equal(44640); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-10-30T10:44:00.000Z')!, 'seconds'), - ).to.equal(3600); - - expect( - adapter.getDiff(testDateIso, adapter.date('2018-10-30T10:44:00.000Z')!, 'milliseconds'), - ).to.equal(3600000); - }); - }); - it('Method: isEqual', () => { const anotherDate = adapter.date(TEST_DATE_ISO_STRING); @@ -309,45 +242,6 @@ export const testCalculations: DescribeJalaliAdapterTestSuite = ({ adapter }) => expect(adapter.setMilliseconds(testDateIso, 11)).toEqualDateTime('2018-10-30T11:44:00.011Z'); }); - it('Method: getNextMonth', () => { - expect(adapter.getNextMonth(testDateIso)).toEqualDateTime('2018-11-29T11:44:00.000Z'); - }); - - it('Method: getPreviousMonth', () => { - expect(adapter.getPreviousMonth(testDateIso)).toEqualDateTime( - new Date('2018-09-30T11:44:00.000Z'), - ); - }); - - it('Method: getMonthArray', () => { - const monthArray = adapter.getMonthArray(testDateIso); - let expectedDate = adapter.date('2018-03-21T00:00:00.000Z')!; - - monthArray.forEach((month) => { - expect(month).toEqualDateTime(expectedDate); - expectedDate = adapter.addMonths(expectedDate, 1)!; - }); - }); - - it('Method: mergeDateAndTime', () => { - const mergedDate = adapter.mergeDateAndTime( - testDateIso, - adapter.date('2018-01-01T14:15:16.000Z')!, - ); - - expect(adapter.toJsDate(mergedDate)).toEqualDateTime('2018-10-30T14:15:16.000Z'); - }); - - it('Method: getWeekdays', () => { - // TODO: AdapterDateFnsJalali `getWeekDays` method seems broken - // Same behavior with the date-io adapter. - expect(adapter.getWeekdays()).to.deep.equal( - adapter.lib === 'date-fns-jalali' - ? ['ش', '1ش', '2ش', '3ش', '4ش', '5ش', 'ج'] - : ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'], - ); - }); - it('Method: getWeekArray', () => { const weekArray = adapter.getWeekArray(testDateIso); const expectedDate = new Date('2018-10-20T00:00:00.000Z'); diff --git a/test/utils/pickers/describeJalaliAdapter/testLocalization.ts b/test/utils/pickers/describeJalaliAdapter/testLocalization.ts index 0930ee5c7a4e..5987220a291d 100644 --- a/test/utils/pickers/describeJalaliAdapter/testLocalization.ts +++ b/test/utils/pickers/describeJalaliAdapter/testLocalization.ts @@ -7,18 +7,6 @@ export const testLocalization: DescribeJalaliAdapterTestSuite = ({ adapter }) => expect(adapter.formatNumber('2')).to.equal('۲'); }); - it('Method: getMeridiemText', () => { - expect(adapter.getMeridiemText('am')).to.equal('ق.ظ'); - expect(adapter.getMeridiemText('pm')).to.equal('ب.ظ'); - }); - - it('Method: getFormatHelperText', () => { - expect(adapter.getFormatHelperText(adapter.formats.keyboardDate)).to.equal('yyyy/mm/dd'); - expect(adapter.getFormatHelperText(adapter.formats.keyboardDateTime12h)).to.equal( - 'yyyy/mm/dd hh:mm (a|p)m', - ); - }); - it('Method: getCurrentLocaleCode', () => { // Returns the default locale expect(adapter.getCurrentLocaleCode()).to.match(/fa/); From 1089a27e5863bce602a110ad0bcbf00348155bc2 Mon Sep 17 00:00:00 2001 From: delangle Date: Mon, 23 Oct 2023 13:56:05 +0200 Subject: [PATCH 02/12] Fix --- test/utils/pickers/describeGregorianAdapter/testCalculations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts index 8ab90d8f1286..2dd64698f3f6 100644 --- a/test/utils/pickers/describeGregorianAdapter/testCalculations.ts +++ b/test/utils/pickers/describeGregorianAdapter/testCalculations.ts @@ -123,7 +123,7 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({ } }); - it.only('should parse undefined', () => { + it('should parse undefined', () => { if (adapterTZ.lib !== 'dayjs') { return; } From 86097bcf638cae42d4c162d712b8b9f7ab8a2769 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 11:16:51 +0100 Subject: [PATCH 03/12] [DateCalendar] Allow to override the format of the header with a prop --- .../CustomCalendarHeaderFormat.js | 25 ++++++++ .../CustomCalendarHeaderFormat.tsx | 25 ++++++++ .../CustomCalendarHeaderFormat.tsx.preview | 9 +++ .../adapters-locale/adapters-locale.md | 12 +++- .../DateRangeCalendar/DateRangeCalendar.tsx | 58 ++++++++++++------- .../DateRangeCalendar.types.ts | 13 +++++ .../DateCalendar/tests/DateCalendar.test.tsx | 52 ++++++++--------- .../PickersCalendarHeader.tsx | 10 ++-- .../PickersArrowSwitcher.types.tsx | 5 ++ 9 files changed, 152 insertions(+), 57 deletions(-) create mode 100644 docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.js create mode 100644 docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx create mode 100644 docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview diff --git a/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.js b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.js new file mode 100644 index 000000000000..b85cbdcf3c75 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.js @@ -0,0 +1,25 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; +import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar'; + +export default function CustomCalendarHeaderFormat() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx new file mode 100644 index 000000000000..b85cbdcf3c75 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import dayjs from 'dayjs'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; +import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar'; + +export default function CustomCalendarHeaderFormat() { + return ( + + + + + + + ); +} diff --git a/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview new file mode 100644 index 000000000000..337ed43ff8c6 --- /dev/null +++ b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 2395bcef41a3..8b8f05de4f04 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -219,7 +219,7 @@ Some locales might keep using English placeholders, because that format is commo ### Custom toolbar format -To customize the format used in the toolbar, use the `toolbarFormat` prop of the toolbar slot. +To customize the format used in the toolbar, use the `toolbarFormat` prop of the `toolbar` slot. :::info This prop is available on all pickers. @@ -244,3 +244,13 @@ This prop is available on all components that render a day calendar, including t The example below adds a dot at the end of each day in the calendar header: {{"demo": "CustomDayOfWeekFormat.js"}} + +### Custom calendar header format + +To customize the format used on the calendar header, use the `format` prop of the `calendarHeader` slot. + +:::info +This prop is available on all pickers with date edition. +::: + +{{"demo": "CustomCalendarHeaderFormat.js"}} diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx index b6acedd94bfb..175aec8c1f54 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx @@ -3,11 +3,14 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import useEventCallback from '@mui/utils/useEventCallback'; import useMediaQuery from '@mui/material/useMediaQuery'; -import { resolveComponentProps } from '@mui/base/utils'; +import { resolveComponentProps, useSlotProps } from '@mui/base/utils'; import { styled, useThemeProps } from '@mui/material/styles'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import { Watermark } from '@mui/x-license-pro'; -import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader'; +import { + PickersCalendarHeader, + PickersCalendarHeaderProps, +} from '@mui/x-date-pickers/PickersCalendarHeader'; import { applyDefaultDate, BaseDateValidationProps, @@ -329,6 +332,32 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( timezone, }); + // When disabled, limit the view to the selected date + const minDateWithDisabled = (disabled && value[0]) || minDate; + const maxDateWithDisabled = (disabled && value[1]) || maxDate; + + const CalendarHeader = slots?.calendarHeader ?? PickersCalendarHeader; + const calendarHeaderProps: PickersCalendarHeaderProps = useSlotProps({ + elementType: CalendarHeader, + externalSlotProps: slotProps?.calendarHeader, + additionalProps: { + views: ['day'], + view: 'day', + currentMonth: calendarState.currentMonth, + onMonthChange: (newMonth, direction) => handleChangeMonth({ newMonth, direction }), + minDate: minDateWithDisabled, + maxDate: maxDateWithDisabled, + disabled, + disablePast, + disableFuture, + reduceAnimations, + slots, + slotProps, + timezone, + }, + ownerState: props, + }); + const prevValue = React.useRef | null>(null); React.useEffect(() => { const date = rangePosition === 'start' ? value[0] : value[1]; @@ -397,10 +426,6 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( disabled, }; - // When disabled, limit the view to the selected date - const minDateWithDisabled = (disabled && value[0]) || minDate; - const maxDateWithDisabled = (disabled && value[1]) || maxDate; - const [rangePreviewDay, setRangePreviewDay] = React.useState(null); const CalendarTransitionProps = React.useMemo( @@ -530,21 +555,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar( {calendarMonths.map((month, index) => ( {calendars === 1 ? ( - handleChangeMonth({ newMonth, direction })} - minDate={minDateWithDisabled} - maxDate={maxDateWithDisabled} - disabled={disabled} - disablePast={disablePast} - disableFuture={disableFuture} - reduceAnimations={reduceAnimations} - slots={slots} - slotProps={slotProps} - timezone={timezone} - /> + ) : ( ( slots={slots} slotProps={slotProps} > - {utils.format(visibleMonths[month], 'monthAndYear')} + {utils.formatByString( + visibleMonths[month], + calendarHeaderProps.format ?? `${utils.formats.month} ${utils.formats.year}`, + )} )} diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts index dc0d18263962..c3e4dac54680 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts @@ -4,6 +4,8 @@ import { SlotComponentProps } from '@mui/base/utils'; import { Theme } from '@mui/material/styles'; import { TimezoneProps } from '@mui/x-date-pickers/models'; import { + PickersCalendarHeader, + PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, } from '@mui/x-date-pickers/PickersCalendarHeader'; @@ -30,6 +32,12 @@ export interface DateRangeCalendarSlotsComponent extends PickersArrowSwitcherSlotsComponent, Omit, 'day'>, PickersCalendarHeaderSlotsComponent { + /** + * Custom component for calendar header. + * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. + * @default PickersCalendarHeader + */ + calendarHeader?: React.ElementType>; /** * Custom component for day in range pickers. * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. @@ -42,6 +50,11 @@ export interface DateRangeCalendarSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps, Omit, 'day'>, PickersCalendarHeaderSlotsComponentsProps { + calendarHeader?: SlotComponentProps< + typeof PickersCalendarHeader, + {}, + DateRangeCalendarProps + >; day?: SlotComponentProps< typeof DateRangePickerDay, {}, diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index 41042aaf6049..b797de9cfe5a 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -4,8 +4,7 @@ import { spy } from 'sinon'; import { fireEvent, userEvent, screen } from '@mui-internal/test-utils'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { createPickerRenderer, AdapterClassToUse, adapterToUse } from 'test/utils/pickers'; +import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -103,28 +102,12 @@ describe('', () => { expect(disabledDays.length).to.equal(31); }); - it('should render header label text according to monthAndYear format', () => { - render( - - , - , - ); - - expect(screen.getByText('2019/01')).toBeVisible(); - }); - it('should render column header according to dayOfWeekFormatter', () => { render( - - `${day}.`} - /> - , - , + `${day}.`} + />, ); ['Su.', 'Mo.', 'Tu.', 'We.', 'Th.', 'Fr.', 'Sa.'].forEach((formattedDay) => { @@ -134,18 +117,29 @@ describe('', () => { it('should render week number when `displayWeekNumber=true`', () => { render( - - {}} - displayWeekNumber - /> - , + {}} + displayWeekNumber + />, ); expect(screen.getAllByRole('rowheader').length).to.equal(5); }); + describe('Slot: calendarHeader', () => { + it('should allow to override the format', () => { + render( + , + ); + + expect(screen.getByText('2019/01')).toBeVisible(); + }); + }); + describe('view: day', () => { it('renders day calendar standalone', () => { render(); diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index f82978de8bf9..79a58c755114 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -146,6 +146,7 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader - + - {utils.format(month, 'monthAndYear')} + {label} {views.length > 1 && !disabled && ( diff --git a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx index 8a8fd49dfb03..3ac691552dc9 100644 --- a/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx +++ b/packages/x-date-pickers/src/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.tsx @@ -16,6 +16,11 @@ export interface ExportedPickersArrowSwitcherProps { */ slotProps?: PickersArrowSwitcherSlotsComponentsProps; classes?: Partial; + /** + * Format used to display the date. + * @default `${adapter.formats.month} ${adapter.formats.year}` + */ + format?: string; } export interface PickersArrowSwitcherProps From c1de61411efa2f02603df28ebc75033df6ac96a0 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 11:21:47 +0100 Subject: [PATCH 04/12] Fix --- .../CustomCalendarHeaderFormat.tsx.preview | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview index 337ed43ff8c6..815f7d972404 100644 --- a/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview +++ b/docs/data/date-pickers/adapters-locale/CustomCalendarHeaderFormat.tsx.preview @@ -1,9 +1,9 @@ \ No newline at end of file From a160f537e19a59c2600262525936bde93d805e3d Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 11:25:09 +0100 Subject: [PATCH 05/12] Fix --- docs/data/date-pickers/adapters-locale/adapters-locale.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 8b8f05de4f04..5b276e1bbad9 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -250,7 +250,7 @@ The example below adds a dot at the end of each day in the calendar header: To customize the format used on the calendar header, use the `format` prop of the `calendarHeader` slot. :::info -This prop is available on all pickers with date edition. +This prop is available on all components that render a day calendar, including the Date Calendar as well as all Date Pickers, Date Time Pickers, and Date Range Pickers. ::: {{"demo": "CustomCalendarHeaderFormat.js"}} From ce0d3cdf133773aee485c6bd0517b38aebfeb712 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 11:37:17 +0100 Subject: [PATCH 06/12] Fix --- docs/pages/x/api/date-pickers/date-range-calendar.json | 6 ++++++ docs/pages/x/api/date-pickers/date-range-picker.json | 6 ++++++ .../pages/x/api/date-pickers/desktop-date-range-picker.json | 6 ++++++ docs/pages/x/api/date-pickers/mobile-date-range-picker.json | 6 ++++++ docs/pages/x/api/date-pickers/pickers-calendar-header.json | 4 ++++ docs/pages/x/api/date-pickers/static-date-range-picker.json | 6 ++++++ .../api-docs/date-pickers/date-range-calendar.json | 1 + .../api-docs/date-pickers/date-range-picker.json | 1 + .../api-docs/date-pickers/desktop-date-range-picker.json | 1 + .../api-docs/date-pickers/mobile-date-range-picker.json | 1 + .../api-docs/date-pickers/pickers-calendar-header.json | 5 +++++ .../api-docs/date-pickers/static-date-range-picker.json | 1 + .../src/PickersCalendarHeader/PickersCalendarHeader.tsx | 5 +++++ 13 files changed, 49 insertions(+) diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index 6c1c36aa8e3d..3ac78dccc823 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -97,6 +97,12 @@ "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } }, "slots": [ + { + "class": null, + "name": "calendarHeader", + "description": "Custom component for calendar header. Check the PickersCalendarHeader component.", + "default": "PickersCalendarHeader" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index f0770e77c4ad..97044abbaa4c 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -148,6 +148,12 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "calendarHeader", + "description": "Custom component for calendar header. Check the PickersCalendarHeader component.", + "default": "PickersCalendarHeader" + }, { "class": null, "name": "clearButton", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index abe69b08636e..093f0df5dbac 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -144,6 +144,12 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "calendarHeader", + "description": "Custom component for calendar header. Check the PickersCalendarHeader component.", + "default": "PickersCalendarHeader" + }, { "class": null, "name": "clearButton", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 3cb09164007c..bc29430b5db1 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -144,6 +144,12 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "calendarHeader", + "description": "Custom component for calendar header. Check the PickersCalendarHeader component.", + "default": "PickersCalendarHeader" + }, { "class": null, "name": "clearButton", diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index 72b778222254..82cd6ee31c1d 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -2,6 +2,10 @@ "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "className": { "type": { "name": "string" } }, + "format": { + "type": { "name": "string" }, + "default": "`${adapter.formats.month} ${adapter.formats.year}`" + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "sx": { diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 0bbcee14a424..91ea6b2f220c 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -125,6 +125,12 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "calendarHeader", + "description": "Custom component for calendar header. Check the PickersCalendarHeader component.", + "default": "PickersCalendarHeader" + }, { "class": null, "name": "day", diff --git a/docs/translations/api-docs/date-pickers/date-range-calendar.json b/docs/translations/api-docs/date-pickers/date-range-calendar.json index fe23714b76ed..8533f7837f8b 100644 --- a/docs/translations/api-docs/date-pickers/date-range-calendar.json +++ b/docs/translations/api-docs/date-pickers/date-range-calendar.json @@ -187,6 +187,7 @@ "dayDragging": { "description": "Styles applied to the day calendar container when dragging" } }, "slotDescriptions": { + "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", "leftArrowIcon": "Icon displayed in the left view switch button.", "nextIconButton": "Button allowing to switch to the right view.", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker.json index 070193a07ba1..22f46df328ce 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker.json @@ -264,6 +264,7 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json index fc15a7134467..d7042240086d 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json @@ -259,6 +259,7 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json index 2151b51c0495..3dc3c4760767 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json @@ -259,6 +259,7 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json index 3a5f0afb726f..2cf3fe7d40ab 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json @@ -11,6 +11,11 @@ "deprecated": "", "typeDescriptions": {} }, + "format": { + "description": "Format used to display the date.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", diff --git a/docs/translations/api-docs/date-pickers/static-date-range-picker.json b/docs/translations/api-docs/date-pickers/static-date-range-picker.json index 43d254b56fd7..afa075bd4ae8 100644 --- a/docs/translations/api-docs/date-pickers/static-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/static-date-range-picker.json @@ -214,6 +214,7 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "calendarHeader": "Custom component for calendar header. Check the PickersCalendarHeader component.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", "layout": "Custom component for wrapping the layout. It wraps the toolbar, views, action bar, and shortcuts.", "leftArrowIcon": "Icon displayed in the left view switch button.", diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index 79a58c755114..2888de0125d2 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -274,6 +274,11 @@ PickersCalendarHeader.propTypes = { disabled: PropTypes.bool, disableFuture: PropTypes.bool, disablePast: PropTypes.bool, + /** + * Format used to display the date. + * @default `${adapter.formats.month} ${adapter.formats.year}` + */ + format: PropTypes.string, labelId: PropTypes.string, maxDate: PropTypes.any.isRequired, minDate: PropTypes.any.isRequired, From 3011df011681cd1fd36863596e70933e915adb0a Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 17:35:38 +0100 Subject: [PATCH 07/12] Fix --- packages/x-date-pickers/src/models/adapters.ts | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/x-date-pickers/src/models/adapters.ts b/packages/x-date-pickers/src/models/adapters.ts index e2acfd72e89d..f45e3dde1909 100644 --- a/packages/x-date-pickers/src/models/adapters.ts +++ b/packages/x-date-pickers/src/models/adapters.ts @@ -272,24 +272,13 @@ export interface MuiPickersAdapter { * @returns {string} The formatted number. */ formatNumber(numberToFormat: string): string; - /** - * Compute the difference between the two dates in the unit provided. - * @deprecated Will be removed in v7. - * @template TDate - * @param {TDate} value The reference date. - * @param {TDate | string} comparing The date to compare with the reference date. - * @param {AdapterUnits} unit The unit in which we want to the result to be. - * @returns {number} The diff between the two dates. - */ - getDiff(value: TDate, comparing: TDate | string, unit?: AdapterUnits): number; - // TODO v7: Type `value` and `comparing` to be `TDate | null`. /** * Check if the two dates are equal (e.g: they represent the same timestamp). - * @param {any} value The reference date. - * @param {any} comparing The date to compare with the reference date. + * @param {TDate | null} value The reference date. + * @param {TDate | null} comparing The date to compare with the reference date. * @returns {boolean} `true` if the two dates are equal. */ - isEqual(value: any, comparing: any): boolean; + isEqual(value: TDate | null, comparing: TDate | null): boolean; /** * Check if the two dates are in the same year (using the timezone of the reference date). * @template TDate From 59bb24fa66b553852f7f1cad032669a6f258e239 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 18:26:54 +0100 Subject: [PATCH 08/12] Add migration guide for methods --- .../migration-pickers-v6.md | 207 ++++++++++++++++++ 1 file changed, 207 insertions(+) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 87c5467a900f..d0d1669b8d99 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -104,6 +104,213 @@ adapter.isValid(dayjs('2022-04-17T15:30')); If you are just passing an adapter to `LocalizationProvider`, then you can safely skip this section. ::: +### Remove the `getDiff` method + +The `getDiff` method have been removed, you can directly use your date library: + +```diff +// 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); +``` + +### Remove the `getFormatHelperText` method + +The `parseISO` method have been removed, you can use the `expandFormat` instead: + +```diff +- const expandedFormat = adapter.getFormatHelperText(format); ++ const expandedFormat = adapter.expandFormat(format); +``` + +And if you need the exact same output you can apply the following transformation: + +```diff +// 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(); +``` + +### Remove the `getMeridiemText` method + +The `getMeridiemText` method have been removed, you can use the `setHours`, `date` and `format` methods to recreate its behavior: + +```diff +- 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'); +``` + +### Remove the `getMonthArray` method + +The `getMonthArray` method have been removed, you can use the `startOfYear` and `addMonths` methods to recreate its behavior: + +```diff +- 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); +``` + +### Remove the `getNextMonth` method + +The `getNextMonth` method have been removed, you can use the `addMonths` method instead: + +```diff +- const nextMonth = adapter.getNextMonth(value); ++ const nextMonth = adapter.addMonths(value, 1); +``` + +### Remove the `getPreviousMonth` method + +The `getPreviousMonth` method have been removed, you can use the `addMonths` method instead: + +```diff +- const previousMonth = adapter.getPreviousMonth(value); ++ const previousMonth = adapter.addMonths(value, -1); +``` + +### Remove the `getWeekdays` method + +The `getWeekdays` method have been removed, you can use the `startOfWeek` and `addDays` methods instead: + +```diff +- 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); +``` + +### Remove the `isNull` method + +The `parseISO` method have been removed, you can replace it with a very basic check: + +```diff +- const isNull = adapter.isNull(value); ++ const isNull = value === null; +``` + +### Remove the `mergeDateAndTime` method: + +The `mergeDateAndTime` method have been removed, you can use the `setHours`, `setMinutes`, and `setSeconds` methods to recreate its behavior: + +```diff +- const result = adapter.mergeDateAndTime(valueWithDate, valueWithTime); ++ const mergeDateAndTime = ( ++ 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); +``` + +### Remove the `parseISO` method + +The `parseISO` method have been removed, you can directly use your date library: + +```diff +- const value = adapter.parseISO(isoString); ++ const value = dayjs(isoString); ++ const value = DateTime.fromISO(isoString); ++ const value = dateFns.parseISO(isoString); ++ const value = moment(isoString, true); +``` + +### Remove the `toISO` method + +The `toISO` method have been removed, you can directly use your date library: + +```diff +- const isoString = adapter.toISO(value); ++ const isoString = value.toISOString(); ++ const isoString = value.toUTC().toISO({ format: 'extended' }); ++ const isoString = dateFns.formatISO(value, { format: 'extended' }); ++ const isoString = value.toISOString(); +``` + ### Restrict the input format of the `isEqual` method The `isEqual` method used to accept any type of value for its two input and tried to parse them before checking if they were equal. From 6e00ab496a417557e973dd6433b65246fa724256 Mon Sep 17 00:00:00 2001 From: delangle Date: Fri, 10 Nov 2023 18:36:54 +0100 Subject: [PATCH 09/12] Improve parseIso diff --- .../migration-pickers-v6/migration-pickers-v6.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index d0d1669b8d99..61ca153b9495 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -292,10 +292,20 @@ The `mergeDateAndTime` method have been removed, you can use the `setHours`, `se The `parseISO` method have been removed, you can directly use your date library: ```diff + // 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); ``` From e7b3b81efa42d7f2349cd661cd8d77d9416823d5 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 13 Nov 2023 09:06:17 +0100 Subject: [PATCH 10/12] Add migration for removed formats --- .../migration-pickers-v6.md | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 61ca153b9495..fca3c2bb5d02 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -89,6 +89,27 @@ To keep the same behavior, you can replace it by `hasLeadingZerosInFormat` ); ``` +## Removed formats + +### Remove the `monthAndYear` format + +The `monthAndYear` format has been removed. +It was used in the header of the calendar views, you can replace it with the new `format` prop of the `calendarHeader` slot: + +```diff + + + + +``` + ## Adapters :::success From a7acc4c1dba55a5cb5c940e80d9280644232ce86 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 13 Nov 2023 09:22:57 +0100 Subject: [PATCH 11/12] Fix --- .../migration-pickers-v6/migration-pickers-v6.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 9515bce7fc03..9aa76dd24821 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -130,11 +130,11 @@ If you are just passing an adapter to `LocalizationProvider`, then you can safel The `getDiff` method have been removed, you can directly use your date library: ```diff -// For Day.js + // For Day.js - const diff = adapter.getDiff(value, comparing, unit); + const diff = value.diff(comparing, unit); -// For Luxon + // For Luxon - const diff = adapter.getDiff(value, comparing, unit); + const getDiff = (value: DateTime, comparing: DateTime | string, unit?: AdapterUnits) => { + const parsedComparing = typeof comparing === 'string' @@ -148,7 +148,7 @@ The `getDiff` method have been removed, you can directly use your date library: + + const diff = getDiff(value, comparing, unit); -// For DateFns + // 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; @@ -177,7 +177,7 @@ The `getDiff` method have been removed, you can directly use your date library: + + const diff = getDiff(value, comparing, unit); -// For Moment + // For Moment - const diff = adapter.getDiff(value, comparing, unit); + const diff = value.diff(comparing, unit); ``` @@ -194,19 +194,19 @@ The `parseISO` method have been removed, you can use the `expandFormat` instead: And if you need the exact same output you can apply the following transformation: ```diff -// For Day.js + // For Day.js - const expandedFormat = adapter.getFormatHelperText(format); + const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase(); -// For Luxon + // For Luxon - const expandedFormat = adapter.getFormatHelperText(format); + const expandedFormat = adapter.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase(); -// For DateFns + // For DateFns - const expandedFormat = adapter.getFormatHelperText(format); + const expandedFormat = adapter.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase(); -// For Moment + // For Moment - const expandedFormat = adapter.getFormatHelperText(format); + const expandedFormat = adapter.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase(); ``` From a6b48e054570215a01a1a706c91cd665c15cae65 Mon Sep 17 00:00:00 2001 From: flavien Date: Mon, 13 Nov 2023 09:40:37 +0100 Subject: [PATCH 12/12] Fix --- .../data/migration/migration-pickers-v6/migration-pickers-v6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 9aa76dd24821..15ba559cb3a7 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -287,7 +287,7 @@ The `parseISO` method have been removed, you can replace it with a very basic ch + const isNull = value === null; ``` -### Remove the `mergeDateAndTime` method: +### Remove the `mergeDateAndTime` method The `mergeDateAndTime` method have been removed, you can use the `setHours`, `setMinutes`, and `setSeconds` methods to recreate its behavior: