ReactJS + Material-UI：如何使用Material-UI将当前日期设置为默认值<DatePicker>？

Question

目前我正在使用reactjs 材料-UI的<DatePicker>（http://www.material-ui.com/#/components/date-picker），并希望拥有今天的当前日期设置为<DatePicker>的默认/初始值。我该怎么做？

当前设置：

<DatePicker
  autoOk={true}
  hintText="Select Date"
  value={inputs.dateValue}
  onChange={this.handleDatechange}
/>

Answer 1

yoy可以做这样的事情

this.state={
    date : new Date()
}
handleDatechange(event,date){
    this.setState({date: date})
}
<DatePicker
  autoOk={true}
  hintText="Select Date"
  value={this.state.date}
  onChange={this.handleDatechange}
/>

Answer 2

datepickers默认行为是在今天的日期开始。情况并非如此的唯一原因是，如果您通过默认日期或具有不同日期的价值道具。

在您的情况下，您将值作为inputs.datevalue传递给，因此这将是初始值。您只需要确保inputs.datevalue设置为今天的日期，例如

inputs.dateValue = new Date();

Answer 3

在使用redux-form的情况下，像我一样，您可以以这种方式设置默认值

在容器集合初始值中：

export default reduxForm({
    form: 'DateForm', 
    initialValues: { use_end_date: new Date() }
})(DateFormComponent);

组件中的字段：

<Field
  name="use_end_date"
  component={ReduxMaterialDatePicker}
  margin="none"
/>

Answer 4

您可以将其设置为

import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import dayjs from 'dayjs';
. 
.
.
<LocalizationProvider dateAdapter={AdapterDayjs} >
    <DatePicker defaultValue={dayjs(new Date())} />
</LocalizationProvider>