Source:  Twitter logo

Currently I'm using ReactJS + Material-UI's <DatePicker> (http://www.material-ui.com/#/components/date-picker), and would like to have today's current date set as the default/initial value for the <DatePicker>. How can I go about doing so?

Current set up:

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

Yoy can do something like this

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}
/>
5 users liked answer #0dislike answer #05
Jatin Bansal profile pic
Jatin Bansal

DatePickers default behaviour is to start on today's date. The only reason this wouldn't be the case is if you pass in either a defaultDate prop, or a value prop with a different date.

In your case you are passing value as inputs.dateValue, so this will be the initial value. You just need to ensure that the value of inputs.dateValue is set to today's date, for example,

inputs.dateValue = new Date();
1 users liked answer #1dislike answer #11
Alex Young profile pic
Alex Young

In case using Redux-Form, like me, you can set the default in this way

In container set initialValues:

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

For Field in component:

<Field
  name="use_end_date"
  component={ReduxMaterialDatePicker}
  margin="none"
/>
1 users liked answer #2dislike answer #21
Serhii Onishchenko profile pic
Serhii Onishchenko

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).