Fix DatePicker localization issues

packages/toolpad-components/package.json

@@ -33,6 +33,8 @@
  "@mui/material": "^5.11.5",
  "@mui/toolpad-core": "^0.0.35",
  "@mui/x-data-grid-pro": "^5.17.19",
+ "@mui/x-date-pickers": "^5.0.14",
+ "dayjs": "^1.11.7",
  "react-markdown": "^8.0.4"
  },
  "devDependencies": {

packages/toolpad-components/src/DatePicker.tsx

@@ -1,15 +1,71 @@
 import * as React from 'react';
-
 import { TextField } from '@mui/material';
-
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { createComponent } from '@mui/toolpad-core';
 import { Dayjs } from 'dayjs';
 import { SX_PROP_HELPER_TEXT } from './constants';
 
-export interface DatePickerProps extends DesktopDatePickerProps<string, Dayjs> {
+const LOCALE_LOADERS = new Map([
+ ['en', () => import('dayjs/locale/en')],
+ ['nl', () => import('dayjs/locale/nl')],
+ ['fr', () => import('dayjs/locale/fr')],
+ // TODO...
+]);
+
+interface LoadableLocale {
+ locale: string;
+ load: () => Promise<unknown>;
+}
+
+const handlers = new Set<() => void>();
+let loadedLocale: undefined | string;
+
+function trygetLoadableLocale(locale: string): LoadableLocale | null {
+ const load = LOCALE_LOADERS.get(locale);
+ if (load) {
+ return { locale, load };
+ }
+ return null;
+}
+
+function getLoadableLocale(): LoadableLocale | null {
+ if (typeof window === 'undefined') {
+ return null;
+ }
+ const languages = window.navigator.languages;
+ for (const locale of languages) {
+ const { language } = new Intl.Locale(locale);
+ const result = trygetLoadableLocale(locale) || trygetLoadableLocale(language);
+ if (result) {
+ return result;
+ }
+ }
+ return null;
+}
+
+const loadableLocale = getLoadableLocale();
+if (loadableLocale) {
+ loadableLocale.load().then(() => {
+ loadedLocale = loadableLocale.locale;
+ handlers.forEach((handler) => handler());
+ });
+}
+
+function subscribeLocaleLoader(cb: () => void) {
+ handlers.add(cb);
+ return () => handlers.delete(cb);
+}
+
+function getSnapshot() {
+ return loadedLocale;
+}
+
+export interface DatePickerProps
+ extends Omit<DesktopDatePickerProps<string, Dayjs>, 'value' | 'onChange'> {
+ value: string;
+ onChange: (newValue: string) => void;
  format: string;
  fullWidth: boolean;
  variant: 'outlined' | 'filled' | 'standard';
@@ -18,19 +74,26 @@ export interface DatePickerProps extends DesktopDatePickerProps<string, Dayjs> {
  defaultValue: string;
 }
 
-function DatePicker(props: DatePickerProps) {
- const customProps: any = {};
+function DatePicker({ format, onChange, ...props }: DatePickerProps) {
+ const handleChange = React.useCallback(
+ (value: Dayjs | null) => {
+ // date-only form of ISO8601. See https://tc39.es/ecma262/#sec-date-time-string-format
+ const stringValue = value?.format('YYYY-MM-DD') || '';
+ onChange(stringValue);
+ },
+ [onChange],
+ );
 
- if (props.format) {
- // If inputFormat receives undefined prop, datepicker throws error
- customProps.inputFormat = props.format;
- }
+ const adapterLocale = React.useSyncExternalStore(subscribeLocaleLoader, getSnapshot);
 
  return (
- <LocalizationProvider dateAdapter={AdapterDayjs as any}>
+ // @ts-expect-error This seems to be a dependencies issue. Recreating the yarn.lock file solves this.
+ // TODO: recreate yarn.lock, or find less drastic solution
+ <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapterLocale}>
  <DesktopDatePicker
- {...customProps}
  {...props}
+ inputFormat={format || 'L'}
+ onChange={handleChange}
  renderInput={(params) => (
  <TextField
  {...params}
@@ -50,13 +113,9 @@ export default createComponent(DatePicker, {
  'The MUI X [Date picker](https://mui.com/x/react-date-pickers/date-picker/) component.\n\nThe date picker lets the user select a date.',
  argTypes: {
  value: {
- helperText: '',
+ helperText: 'The currently selected date.',
  typeDef: { type: 'string' },
  onChangeProp: 'onChange',
- onChangeHandler: (newValue: Dayjs) => {
- // date-only form of ISO8601. See https://tc39.es/ecma262/#sec-date-time-string-format
- return newValue.format('YYYY-MM-DD');
- },
  defaultValue: '',
  defaultValueProp: 'defaultValue',
  },

yarn.lock

@@ -2112,6 +2112,24 @@
  react-transition-group "^4.4.5"
  rifm "^0.12.1"
 
+"@mui/x-date-pickers@^5.0.14":
+ version "5.0.14"
+ resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.14.tgz#acfc3ef9be914e2f0127484442063f7300deeebf"
+ integrity sha512-+k+YOL++wEwuF6XRhF3uMLOXlHkUjMHmbXOXWWZ9wJppaGFolj9fNmUvydCp3Z0E9dPRt8J5Vv0z+upZ9KyQZg==
+ dependencies:
+ "@babel/runtime" "^7.18.9"
+ "@date-io/core" "^2.15.0"
+ "@date-io/date-fns" "^2.15.0"
+ "@date-io/dayjs" "^2.15.0"
+ "@date-io/luxon" "^2.15.0"
+ "@date-io/moment" "^2.15.0"
+ "@mui/utils" "^5.10.3"
+ "@types/react-transition-group" "^4.4.5"
+ clsx "^1.2.1"
+ prop-types "^15.7.2"
+ react-transition-group "^4.4.5"
+ rifm "^0.12.1"
+
 "@mui/x-license-pro@5.17.12":
  version "5.17.12"
  resolved "https://registry.yarnpkg.com/@mui/x-license-pro/-/x-license-pro-5.17.12.tgz#d069416b7191f9f5b77b2bf7375d2c51aead497c"