标签: mui-x-date-picker

我无法将我的图标添加到组件中。

https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc

我正在尝试更改 MUI X DatePicker（带有 Material UI）日期文本和日历图标颜色。
我尝试将其传递样式更改为 InputProps，但它仅适用于删除边框。
相反，没有任何改变，我尝试将样式应用于 theme.tsx，但它也没有帮助。任何帮助将不胜感激。

import * as React from "react";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import { makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles(() =>
  createStyles({
    noBorder: {
      outline: "none",
      border: "none",
      color: "#fff",
    },
  })
);

export default function DatePicker() {
  const [value, setValue] = React.useState<Date | null>();
  const classes = useStyles();

  const handleChange = (newvalue: …

最近，Luxon 增加了对本地化周信息的支持。我将 Luxon 版本更新到包含此更新的最新版本，3.4.4但打开日历时，一周仍然从星期一开始，而不是星期日。

我认为LuxonAdapter会接受更改并使用本地化的周数据，但它似乎没有任何不同。

我package.json有两个库的最新版本：

"@mui/x-date-pickers": "^7.0.0-alpha.0",
"luxon": "^3.4.4",

然后，在我的中App.tsx添加LocalizationProvider：LuxonAdapter

import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";

<LocalizationProvider dateAdapter={AdapterLuxon}>
    <Outlet />
</LocalizationProvider>

最后，DateCalendar组件：

import { DateTime } from "luxon";
import { DateCalendar } from "@mui/x-date-pickers";

const [calendarValue, setCalendarValue] = useState<DateTime | null>(DateTime.now());

<DateCalendar
    value={calendarValue}
    onChange={setCalendarValue}
    views={["day"]}
    disablePast
    sx={{ m: 0 }}
/>

我遇到了一些问题，但我没有找到解决方案。\nMUI X DatePicker（带有 Material UI）似乎有一种默认格式，用于将日期显示为

Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of timezone here)\n

但是，我需要能够传递以下格式的日期

yyyy-MM-ddThh:MM:ss+HH:mm这是(Date)T(Time)+(Timezone)

到组件，然后以相同的格式返回提交。

在某些情况下，此日期时间选择器的值未设置，在某些情况下则已设置。而且我不确定如何获得我需要的格式，因为我无法控制收到的日期格式。

该组件似乎可以解析我提供的数据，并设置正确的值，但新数据（如果值发生变化）确实采用不同的格式。

编辑：上面只是一个简单的例子。

Data I get: 2020-10-11T15:56:28+11:00\n

组件输出的数据：{ "$L": "en", "$u": undefined, "$d": Date Sun Oct 11 2020 15:56:28 GMT+1100 (Australian Eastern Daylight Time), "$x": {}, "$y": 2020, "$M": 9, "$D": 11, "$W": 0, "$H": 15, "$m": 56, \xe2\x80\xa6 }

DateTimePicker的相关代码：

import React from 'react';\nimport TextField from '@mui/material/TextField';\nimport …

我正在将以下内容用于 <DatePicker>。看了很多视频和沙盒，效果很好。

不知道为什么我在 renderInput 上收到以下错误

<DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={(newValue) => { setSelectedDate(newValue) }}
        renderInput={(props) => <TextField {...props} />}
      />

Type '{ label: string; value: Date; onChange: (newValue: Date) => void; renderInput: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.
  Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.ts(2322)

我正在使用 Material ui Datepicker 6 版本，我想设置从星期一开始的 dayOfWeek。

import React from "react";
import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import moment, { Moment } from "moment";
import { setDefaultOptions } from "date-fns";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { enGB } from "date-fns/locale";

interface props {
  value: Moment | null;
  onChange: (newValue: Moment | null) => void;
  placeholder: string;
}

export default function DatePicker({ value, onChange, placeholder }: props) {
  // setDefaultOptions({ locale: …