Use browser language as dayjs locale

src/components/settings/DateSetting.tsx

@@ -20,7 +20,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { loadDayJsLocale } from '@/util/language.tsx';
 
 export const DateSetting = ({
     settingName,
@@ -35,19 +34,11 @@ export const DateSetting = ({
     handleChange: (path?: string | null) => void;
     remove?: boolean;
 }) => {
-    const { t, i18n } = useTranslation();
+    const { t } = useTranslation();
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
 
-    const [locale, setLocale] = useState('en');
-
-    const currentLocale = i18n.language;
-
-    useEffect(() => {
-        loadDayJsLocale(currentLocale).then((wasLoaded) => setLocale(wasLoaded ? currentLocale : 'en'));
-    }, [currentLocale]);
-
     useEffect(() => {
         if (!value) {
             return;
@@ -90,7 +81,7 @@ export const DateSetting = ({
             <ListItemButton onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
-                    secondary={value ? dayjs(Number(value)).locale(currentLocale).format('L') : '-'}
+                    secondary={value ? dayjs(Number(value)).format('L') : '-'}
                     secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
                 />
             </ListItemButton>
@@ -98,7 +89,7 @@ export const DateSetting = ({
             <Dialog open={isDialogOpen} onClose={closeDialog}>
                 <DialogContent>
                     <DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
-                    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
+                    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={navigator.language}>
                         <DatePicker
                             value={dialogValue ? dayjs(Number(dialogValue)) : null}
                             onChange={(date) => {

src/components/settings/TimeSetting.tsx

@@ -19,7 +19,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import dayjs from 'dayjs';
-import { loadDayJsLocale } from '@/util/language.tsx';
 
 export const TimeSetting = ({
     settingName,
@@ -32,19 +31,11 @@ export const TimeSetting = ({
     defaultValue: string;
     handleChange: (path: string) => void;
 }) => {
-    const { t, i18n } = useTranslation();
+    const { t } = useTranslation();
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [dialogValue, setDialogValue] = useState(value);
 
-    const [locale, setLocale] = useState('en');
-
-    const currentLocale = i18n.language;
-
-    useEffect(() => {
-        loadDayJsLocale(currentLocale).then((wasLoaded) => setLocale(wasLoaded ? currentLocale : 'en'));
-    }, [currentLocale]);
-
     useEffect(() => {
         if (!value) {
             return;
@@ -81,13 +72,13 @@ export const TimeSetting = ({
         },
         [value, handleChange, closeDialog],
     );
-
+    console.log(navigator.language);
     return (
         <>
             <ListItemButton onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
-                    secondary={dayjs(value, 'HH:mm').locale(currentLocale).format('LT')}
+                    secondary={dayjs(value, 'HH:mm').format('LT')}
                     secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
                 />
             </ListItemButton>
@@ -95,7 +86,7 @@ export const TimeSetting = ({
             <Dialog open={isDialogOpen} onClose={closeDialog}>
                 <DialogContent>
                     <DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
-                    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
+                    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={navigator.language}>
                         <TimePicker
                             value={dayjs(dialogValue, 'HH:mm')}
                             defaultValue={dayjs(defaultValue, 'HH:mm')}

src/index.tsx

@@ -15,9 +15,14 @@ import '@/index.css';
 // roboto font
 import '@fontsource/roboto';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { loadDayJsLocale } from '@/util/language.tsx';
 
 dayjs.extend(customParseFormat);
 
+loadDayJsLocale(navigator.language).then(() => {
+    dayjs.locale(navigator.language);
+});
+
 if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then((registration) => {
         registration.unregister().catch(defaultPromiseErrorHandler('unregister service workers'));