fix: Calendar displays hebrew month name in english locale #1040 (#1062)

Author: AvivAbachi

src/layout/ThemeContext.tsx

@@ -1,6 +1,8 @@
 import { FC, PropsWithChildren, createContext, useContext, useMemo } from 'react'
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles'
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'
+import { LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { ConfigProvider, theme } from 'antd'
 import heIL from 'antd/es/locale/he_IL'
 import { useTranslation } from 'react-i18next'
@@ -38,6 +40,8 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   // Re-create the theme when the theme changes or the language changes
   const theme = useMemo(() => {
     const direction = i18n.language === 'he' ? 'rtl' : 'ltr'
+    document.documentElement.dir = direction
+    document.documentElement.lang = i18n.language
     return createTheme({
       direction,
       palette: {
@@ -47,22 +51,24 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   }, [isDarkTheme, i18n.language])
 
   return (
-    <ConfigProvider
-      direction={i18n.dir()}
-      locale={heIL}
-      theme={{
-        algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
-        token: {
-          colorBgBase: isDarkTheme ? '#1c1d1c' : '#ffffff',
-          colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
-        },
-      }}>
-      <MuiThemeProvider theme={theme}>
-        <ScopedCssBaseline enableColorScheme>
-          <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
-        </ScopedCssBaseline>
-      </MuiThemeProvider>
-    </ConfigProvider>
+    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={i18n.language}>
+      <ConfigProvider
+        direction={i18n.dir()}
+        locale={heIL}
+        theme={{
+          algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
+          token: {
+            colorBgBase: isDarkTheme ? '#1c1d1c' : '#ffffff',
+            colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
+          },
+        }}>
+        <MuiThemeProvider theme={theme}>
+          <ScopedCssBaseline enableColorScheme>
+            <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
+          </ScopedCssBaseline>
+        </MuiThemeProvider>
+      </ConfigProvider>
+    </LocalizationProvider>
   )
 }
 

src/pages/components/DateSelector.tsx

@@ -22,7 +22,6 @@ export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTi
 
   return (
     <DatePicker
-      sx={{ width: '100%' }}
       value={time}
       onChange={(ts) => onChange(ts)}
       format="DD/MM/YYYY"
@@ -31,7 +30,16 @@ export function DateSelector({ time, onChange, customLabel, minDate }: DataAndTi
       minDate={minDate}
       onError={(err) => setError(err)}
       slotProps={{
+        calendarHeader: {
+          sx: {
+            '.MuiPickersCalendarHeader-labelContainer': {
+              margin: '0',
+              marginInlineEnd: 'auto',
+            },
+          },
+        },
         textField: {
+          fullWidth: true,
           helperText: errorMessageKey && t(errorMessageKey),
         },
       }}

src/routes/MainRoute.tsx

@@ -9,8 +9,6 @@ import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import rtlPlugin from 'stylis-plugin-rtl'
 import 'moment/locale/he'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { LocalizationProvider } from '@mui/x-date-pickers'
 import { PageSearchState, SearchContext } from '../model/pageState'
 import { ThemeProvider } from '../layout/ThemeContext'
 import { PAGES } from '../routes'
@@ -78,11 +76,9 @@ export const MainRoute = () => {
   return (
     <SearchContext.Provider value={{ search, setSearch: safeSetSearch }}>
       <CacheProvider value={cacheRtl}>
-        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="he">
-          <ThemeProvider>
-            <MainLayout />
-          </ThemeProvider>
-        </LocalizationProvider>
+        <ThemeProvider>
+          <MainLayout />
+        </ThemeProvider>
       </CacheProvider>
     </SearchContext.Provider>
   )