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.

Sign up for GitHub

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

[DateTimeRangePicker] Fix date format resolving from views on 24hr locales #14341

Merged
merged 5 commits into from
Aug 29, 2024
Merged

[DateTimeRangePicker] Fix date format resolving from views on 24hr locales #14341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b6769ec
fixes case for day view
Aug 26, 2024
dbddcbf
apply fix only for ranges
Aug 26, 2024
f016c84
fix type
Aug 26, 2024
916c587
Fix to include only date views in the dateViews` list
LukasTy Aug 29, 2024
6f06e4e
Do not resolve `dateFormat` for `DateTimeRangePicker`
LukasTy Aug 29, 2024
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
2 changes: 1 addition & 1 deletion packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang
...defaultizedProps,
views,
viewRenderers,
format: resolveDateTimeFormat(utils, defaultizedProps),
format: resolveDateTimeFormat(utils, defaultizedProps, true),
// force true to correctly handle `renderTimeViewClock` as a renderer
ampmInClock: true,
calendars: defaultizedProps.calendars ?? 1,
Expand Down
2 changes: 1 addition & 1 deletion packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP
const props = {
...defaultizedProps,
viewRenderers,
format: resolveDateTimeFormat(utils, defaultizedProps),
format: resolveDateTimeFormat(utils, defaultizedProps, true),
// Force one calendar on mobile to avoid layout issues
calendars: 1,
// force true to correctly handle `renderTimeViewClock` as a renderer
Expand Down
15 changes: 11 additions & 4 deletions packages/x-date-pickers/src/internals/utils/date-time-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
TimeView,
} from '../../models';
import { resolveTimeFormat, isTimeView, isInternalTimeView } from './time-utils';
import { resolveDateFormat } from './date-utils';
import { isDatePickerView, resolveDateFormat } from './date-utils';
import { DateOrTimeViewWithMeridiem } from '../models';
import { DesktopOnlyTimePickerProps } from '../models/props/clock';
import { DefaultizedProps } from '../models/helpers';
Expand All @@ -18,7 +18,12 @@ export const resolveDateTimeFormat = <TDate extends PickerValidDate>(
views,
format,
...other
}: { format?: string; views: readonly DateOrTimeViewWithMeridiem[]; ampm: boolean },
}: {
format?: string;
views: readonly DateOrTimeViewWithMeridiem[];
ampm: boolean;
},
ignoreDateResolving?: boolean,
) => {
if (format) {
return format;
Expand All @@ -30,7 +35,7 @@ export const resolveDateTimeFormat = <TDate extends PickerValidDate>(
views.forEach((view) => {
if (isTimeView(view)) {
timeViews.push(view as TimeView);
} else {
} else if (isDatePickerView(view)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem was an oversight that we did not exclude meridiem view, which caused resolveDateFormat to always return keyboardDate in case of a locale with 12h clock.
On 24h clock the behavior was "correct".
I've adjusted the code to avoid this inconsistency and also added an exception to not resolve dateFormat on DateTimeRange pickers as they do not have different date views other than day for now.

dateViews.push(view as DateView);
}
});
Expand All @@ -44,7 +49,9 @@ export const resolveDateTimeFormat = <TDate extends PickerValidDate>(
}

const timeFormat = resolveTimeFormat(utils, { views: timeViews, ...other });
const dateFormat = resolveDateFormat(utils, { views: dateViews, ...other }, false);
const dateFormat = ignoreDateResolving
? utils.formats.keyboardDate
: resolveDateFormat(utils, { views: dateViews, ...other }, false);

return `${dateFormat} ${timeFormat}`;
};
Expand Down
Loading