[pickers] Wrong direction inside sections

[ErezKatsman]

Order ID or Support key 💳 (optional)

[Order #61468]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Hi, i'm working with DatePicker. and I use format DD/MM/YYYY. In my computer the format works as as expected. In the client's onprem VM it displays the date backwards. Example: in my computer (local or AWS host) its 23/04/2023 and at the clients host is 3202/40/32. I didn't find a solution for this problem. I want to override the output text, something like valueFormatter in DataGrid columns prop. I didn't find any prop to change the input display.

import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {DemoContainer} from "@mui/x-date-pickers/internals/demo";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import strings from "../../components/EventsTable/strings";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import React from "react";
import {IEvent} from "../../app/features/eventSlice";
import useStyle from "./datePickersInput.css"

interface IProps{
    eventEdited: IEvent;
    setEventEdited: React.Dispatch<React.SetStateAction<IEvent>>
}

export const DatePickersInput = ({eventEdited, setEventEdited}:IProps) =>{

    const classes = useStyle()

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DemoContainer components={['DatePicker']}>
                <div className={classes.dateContainer}>
                    <DatePicker
                        format="DD/MM/YYYY"
                        value={dayjs.unix(eventEdited.start_at as number)}
                        onChange={(date) => { //@ts-ignore
                            setEventEdited({...eventEdited, start_at: Math.floor(new Date(date).getTime() / 1000)})
                        }} label={strings().start_at}
                    />
                    <DatePicker
                        format="DD/MM/YYYY"
                        value={dayjs.unix(eventEdited.end_at as number)}
                        onChange={(date) => { //@ts-ignore
                            setEventEdited({...eventEdited, end_at: Math.floor(new Date(date).getTime() / 1000)})
                        }} label={strings().end_at}
                    />
                </div>
            </DemoContainer>
        </LocalizationProvider>
    )
}

Your environment 🌎

npx: installed 2 in 7.067s

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.48)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6
    @emotion/styled: ^11.10.6 => 11.10.6
    @mui/base:  5.0.0-alpha.119
    @mui/core-downloads-tracker:  5.11.11
    @mui/icons-material: ^5.11.11 => 5.11.11
    @mui/material: ^5.11.11 => 5.11.11
    @mui/private-theming:  5.11.11
    @mui/styled-engine:  5.11.11
    @mui/styles: ^5.11.11 => 5.11.11
    @mui/system:  5.11.11
    @mui/types:  7.2.3
    @mui/utils:  5.11.11
    @mui/x-data-grid: ^5.17.25 => 5.17.25
    @mui/x-data-grid-generator: ^5.17.25 => 5.17.25
    @mui/x-data-grid-premium:  5.17.25
    @mui/x-data-grid-pro: ^5.17.25 => 5.17.25
    @mui/x-date-pickers: ^6.0.0 => 6.0.0
    @mui/x-license-pro:  5.17.12
    @types/react: ^17.0.53 => 17.0.53
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.5.4 => 4.9.5

[alexfauquette]

If they have 3202/40/32 it looks like a miss match with the RTL (Right To Left) in the theme provider and the browser.

A solution could be to move to the last date-pickers version (after 6.0.4) since we removed some special characters when not needed https://github.com/mui/mui-x/pull/8325

If it does not fix your problem, I would need a reproduction to investigate. This codesandbox can be a goo starting point: https://codesandbox.io/s/c0tsg2?file=/demo.tsx

[ErezKatsman]

Hi Alex, thank you for your respond. For now I updated the DatePickers version to last. And what do you mean by adding RTL to theme provider ? And I will update if the problem solved just after I will release new version for customer's onprem environment. if you have missing information specify what you think is necessary you to know. Thank you again

[alexfauquette]

And what do you mean by adding RTL to theme provider

I'm talking about this step

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  direction: 'rtl',
});

You have two way of specifying rtl. The first is dir="rtl" which tells the browser that characters might be written from right to left, and that margin start is at the right, ... But sometime we need to revert element orders, or other small tweaks so the theme has a property called direction to know if we should render components for LTR or RTL

In the case of pickers, between v6.0.0 and v6.0.4 we were adding some specific utf-8 characters to enforce characters and sections order. BUt to work, it resuire that the HTML dir and the theme direction are coherent

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.