Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pickers] Pass the date object to dayOfWeekFormatter and deprecate the string parameter #10345

Merged
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a3b6981
added new `getWeekdaysDates` method and deprecated the `getWeekdays` …
michelengelen Sep 13, 2023
6be99be
refactored the methods name from `getWeekdaysDates` to `getWeek` and …
michelengelen Sep 14, 2023
0b25e4b
docs update
michelengelen Sep 14, 2023
b5a64c5
added tests for `getWeek` method
michelengelen Sep 14, 2023
1fac958
removed `getWeek` and instead added a new util `getWeekdays` in date-…
michelengelen Sep 15, 2023
f05f8a4
added a slice to the formatted string so it does not introduce a regr…
michelengelen Sep 15, 2023
c0dc669
changed typescript docs preview
michelengelen Sep 18, 2023
264163f
fixed a wrong number in the slice
michelengelen Sep 18, 2023
7a473bd
Update packages/x-date-pickers/src/DateCalendar/DayCalendar.tsx
michelengelen Sep 20, 2023
9fa2e7e
Update docs/data/date-pickers/adapters-locale/CustomDayOfWeekFormat.tsx
michelengelen Sep 20, 2023
e328714
PR review remarks
michelengelen Sep 20, 2023
69ec887
updated docs
michelengelen Sep 20, 2023
2bc729c
Update docs/data/date-pickers/adapters-locale/adapters-locale.md
michelengelen Sep 26, 2023
6d7b35f
fixed a wrong param name in docs
michelengelen Sep 26, 2023
d6f2d07
fixed a wrong method name
michelengelen Sep 26, 2023
a1e1d81
changed included files in tsconfig file
michelengelen Sep 26, 2023
7b12275
Merge remote-tracking branch 'origin/9984/refactor-dayOfWeekFormatter…
michelengelen Sep 26, 2023
3f0eccf
moved getWeekdays method from x-date-pickers-pro to x-date-pickers pa…
michelengelen Sep 26, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function CustomDayOfWeekFormat() {
<DateCalendar
value={value}
onChange={(newValue) => setValue(newValue)}
dayOfWeekFormatter={(day) => `${day}.`}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('dd')}.`}
/>
</LocalizationProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function CustomDayOfWeekFormat() {
<DateCalendar
value={value}
onChange={(newValue) => setValue(newValue)}
dayOfWeekFormatter={(day) => `${day}.`}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('dd')}.`}
/>
</LocalizationProvider>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<DateCalendar
value={value}
onChange={(newValue) => setValue(newValue)}
dayOfWeekFormatter={(day) => `${day}.`}
dayOfWeekFormatter={(_day, weekday) => `${weekday.format('dd')}.`}
/>
7 changes: 5 additions & 2 deletions docs/data/date-pickers/adapters-locale/adapters-locale.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,11 @@ This prop is available on all pickers.
### Custom day of week format

Use `dayOfWeekFormatter` to customize day names in the calendar header.
This prop takes the short name of the day provided by the date library as an input, and returns it's formatted version.
The default formatter only keeps the first letter and capitalises it.
This prop takes 2 parameters, `day` (a string with the name of the day) and `date` (the date of the day provided by the date library), as an input and returns a formatted string.
michelengelen marked this conversation as resolved.
Show resolved Hide resolved
The default formatter only keeps the first letter of the name and capitalises it.
michelengelen marked this conversation as resolved.
Show resolved Hide resolved

:::warning
The first parameter `day` will be removed in v7 in favor of the second parameter `date` for more flexibility.

:::info
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.
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/date-calendar.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/date-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/date-range-calendar.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/date-range-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/date-time-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-date-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-date-range-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/desktop-date-time-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/mobile-date-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/mobile-date-range-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/mobile-date-time-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/static-date-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/static-date-range-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
6 changes: 3 additions & 3 deletions docs/pages/x/api/date-pickers/static-date-time-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@
},
"dayOfWeekFormatter": {
"type": { "name": "func" },
"default": "(day) => day.charAt(0).toUpperCase()",
"default": "(_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()",
"signature": {
"type": "function(day: string) => string",
"describedArgs": ["day"],
"type": "function(day: string, date: TDate) => string",
"describedArgs": ["day", "date"],
"returned": "string"
}
},
Expand Down
3 changes: 2 additions & 1 deletion docs/translations/api-docs/date-pickers/date-calendar.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
3 changes: 2 additions & 1 deletion docs/translations/api-docs/date-pickers/date-picker.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"description": "Formats the day of week displayed in the calendar header.",
"deprecated": "",
"typeDescriptions": {
"day": "The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.",
"day": "The day of week provided by the adapter. Deprecated, will be removed in v7: Use <code>date</code> instead.",
"date": "The date of the day of week provided by the adapter.",
"string": "The name to display."
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -628,9 +628,10 @@ DateRangeCalendar.propTypes = {
currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
/**
* Formats the day of week displayed in the calendar header.
* @param {string} day The day of week provided by the adapter's method `getWeekdays`.
* @param {string} day The day of week provided by the adapter. Deprecated, will be removed in v7: Use `date` instead.
* @param {TDate} date The date of the day of week provided by the adapter.
* @returns {string} The name to display.
* @default (day) => day.charAt(0).toUpperCase()
* @default (_day: string, date: TDate) => adapter.format(weekday, 'weekdayShort').charAt(0).toUpperCase()
*/
dayOfWeekFormatter: PropTypes.func,
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export interface DateRangeCalendarSlotsComponentsProps<TDate>
}

export interface ExportedDateRangeCalendarProps<TDate>
extends ExportedDayCalendarProps,
extends ExportedDayCalendarProps<TDate>,
BaseDateValidationProps<TDate>,
DayRangeValidationProps<TDate>,
TimezoneProps,
Expand Down
Loading