Material-ui: [DatePicker] Enabling setting a month/date that the picker opens on

Created on 4 Aug 2016  路  7Comments  路  Source: mui-org/material-ui

If I understand the documentation well, as for now there is no way to force the date picker to open on specific month/date. This would be really great. If I set a minDate in the future, the user has to click a lot to move to the month with dates that are enabled to be selected.

Also I think that It would be more user-friendly if the DatePicker's default month would be the month of the minDate, if it's present of course.

DatePicker

Most helpful comment

One way to do that with the current implementation is to keep a ref to the date picker component and call setState directly on it, which is ugly and will certainly break some day but it works for now. Something like this:

<DatePicker
  ref={(c) => this.picker = c}
  minDate={minDate}
  onShow={() => {
    if (this.picker.state.date === undefined)
      this.picker.setState({dialogDate: minDate})
    }
  }
/>

It would be much better if the default dialog date was the min date when one is provided.

All 7 comments

I agree this would be a nice feature. The current work around is setting the defaultDate value to the date you want it to open on.

@mpontikes I need the default field value to be empty. Also I'm using a controlled input. This is used in a search form which should allow no date input filled.

This is a problem for me as well.
It seems like the cleanest way to fix this problem is to add something like

else if (props.defaultValue) {
  return props.defaultValue;
}

to DatePicker.js#L237.

Has anyone found a solution to this?

One way to do that with the current implementation is to keep a ref to the date picker component and call setState directly on it, which is ugly and will certainly break some day but it works for now. Something like this:

<DatePicker
  ref={(c) => this.picker = c}
  minDate={minDate}
  onShow={() => {
    if (this.picker.state.date === undefined)
      this.picker.setState({dialogDate: minDate})
    }
  }
/>

It would be much better if the default dialog date was the min date when one is provided.

Hello, same problem here..
What is the status of this issue ?

Thank you

Closing for #4787

Was this page helpful?
0 / 5 - 0 ratings