Formik MUI 本地化提供程序无法与 GB 格式的 Luxon 适配器配合使用

Question

我正在使用 MUI 本地化提供程序和 luxon 适配器，并尝试将日期转换为 GB。但是，当我希望它显示为 dd/mm/yyyy 时，它不起作用并保持 mm/dd/yyyy 格式。
请看前端问题图

这是我的表单组件代码。为了简单起见，我删除了其他字段。

import React, { useState, useEffect } from 'react';
import { Grid, TextField, Typography, FormControlLabel, Radio, RadioGroup, FormControl, FormLabel, Button, Autocomplete, Select } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { Settings, DateTime } from 'luxon';


// Set Luxon to use the UK locale globally
Settings.defaultLocale = 'en-GB';

const FormikMuiTextField = ({ formik, name, label, type = 'text', xs = 12, sm }) => {
    return (
      <Grid item xs={xs} sm={sm}>
        <TextField
          fullWidth
          variant="outlined"
          margin="normal"
          id={name}
          name={name}
          label={label}
          type={type}
          value={formik.values[name]}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.touched[name] && formik.errors[name]}
          disabled={name === "totalPassengers"} // Disable the field for totalPassengers
          select={type === "select"}
          SelectProps={{ native: true }}
        >
          {type === "select" && ['Option1', 'Option2', 'Option3'].map(option => (
            <option key={option} value={option}>{option}</option>
          ))}
        </TextField>
      </Grid>
    );
  };


  return (
    
  <LocalizationProvider dateAdapter={AdapterLuxon}>


  <Grid item xs={6}>
  <DatePicker
    label="Departure Date"
    name="departureDate"

    value={formik.values.departureDate ? DateTime.fromISO(formik.values.departureDate) : null}
    onChange={(newValue) => {
      formik.setFieldValue('departureDate', newValue ? newValue.toISO() : '');
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={params.inputProps.value ? DateTime.fromISO(params.inputProps.value).toFormat('dd/MM/yyyy') : ''}
      />
    )}
    inputFormat="dd/MM/yyyy"

    fullWidth // Make the DatePicker full width
  />
</Grid>
</LocalizationProvider>
)

这是我的package.json：

{
  "name": "umrah-quote-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^2.10.0",
    "@date-io/luxon": "^3.0.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/x-date-pickers": "^7.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "date-fns": "^2.28.0",
    "express": "^4.19.2",
    "formik": "^2.4.5",
    "luxon": "^3.4.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-resizable": "^3.0.5",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "react-select": "^5.8.0",
    "web-vitals": "^2.1.4",
    "yup": "^1.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

在使用 date-fns 适配器之前，我尝试过使用不同的适配器。但我确信这是正确设置的。我尝试仅在日期字段上使用本地化提供程序，但它不起作用。

Answer 1

您缺少

adapterLocale

的

LocalizationProvider

财产：

import React, { useState, useEffect } from 'react';
import { Grid, TextField, Typography, FormControlLabel, Radio, RadioGroup, FormControl, FormLabel, Button, Autocomplete, Select } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { Settings, DateTime } from 'luxon';


// Set Luxon to use the UK locale globally
Settings.defaultLocale = 'en-GB';

const FormikMuiTextField = ({ formik, name, label, type = 'text', xs = 12, sm }) => {
    return (
      <Grid item xs={xs} sm={sm}>
        <TextField
          fullWidth
          variant="outlined"
          margin="normal"
          id={name}
          name={name}
          label={label}
          type={type}
          value={formik.values[name]}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.touched[name] && formik.errors[name]}
          disabled={name === "totalPassengers"} // Disable the field for totalPassengers
          select={type === "select"}
          SelectProps={{ native: true }}
        >
          {type === "select" && ['Option1', 'Option2', 'Option3'].map(option => (
            <option key={option} value={option}>{option}</option>
          ))}
        </TextField>
      </Grid>
    );
  };


  return (
    
  <LocalizationProvider adapterLocale={'en-GB'} dateAdapter={AdapterLuxon}>

  <Grid item xs={6}>
  <DatePicker
    label="Departure Date"
    name="departureDate"

    value={formik.values.departureDate ? DateTime.fromISO(formik.values.departureDate) : null}
    onChange={(newValue) => {
      formik.setFieldValue('departureDate', newValue ? newValue.toISO() : '');
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={params.inputProps.value ? DateTime.fromISO(params.inputProps.value).toFormat('dd/MM/yyyy') : ''}
      />
    )}
    inputFormat="dd/MM/yyyy"

    fullWidth // Make the DatePicker full width
  />
</Grid>
</LocalizationProvider>
)

MUI 有非常好的文档。通常，当我遇到 MUI 问题时，我会查看文档，看看组件是否具有某些可以解决我的问题的属性。我建议阅读 MUI 的完整文档（我知道它很长，但值得）。它将帮助您更快地找到问题的解决方案。