ReactJS+材料-用户界面:如何使用物料界面将当前日期设置为默认值< DatePicker>?

huwehgph  于 2023-03-12  发布在  React
关注(0)|答案(4)|浏览(221)

目前我正在使用ReactJS + Material-UI的<DatePicker>(http://www.material-ui.com/#/components/date-picker),并希望将今天的当前日期设置为<DatePicker>的默认/初始值。我该如何进行操作?
当前设置:

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

vnjpjtjt1#

你可以做这样的事

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}
/>
oogrdqng

oogrdqng2#

DatePickers的默认行为是从今天的日期开始,唯一的原因是如果你传入一个defaultDate属性,或者一个具有不同日期的值属性。
在您的例子中,您将值作为inputs.dateValue传递,因此这将是初始值。您只需要确保inputs.dateValue的值被设置为今天的日期,例如,

inputs.dateValue = new Date();
yruzcnhs

yruzcnhs3#

在使用Redux-Form的情况下,像我一样,可以用这种方式设置默认值
在容器中设置初始值:

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

对于组件中的字段:

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

jtw3ybtb4#

你可以这样设置

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>

相关问题