CODEWITHSUNDEEP
reactjsdatepickermaterial-ui
Jordan Baker
Jordan Baker

Reputation: 4625

Material UI: How to use DatePickerDialog outside of DatePicker?

Is it possible to use the DatePickerDialog without the DatePicker? The reason I want to do this is that I want more control over how the existing data is formatted than the TextField in the DatePicker allows.

I tried and this is what I got, all the dates are garbled: all the dates are garbled

Here's my code:

  <MuiThemeProvider>
    <div>
      <span onClick={this.handleClick}>Open</span>
      <DatePickerDialog
        ref="dialogWindow"
        container="inline"
        mode="landscape"
      />
    </div>
  </MuiThemeProvider>

Just a note that I am embedding this into an already existing app that is not react so that's why I have put the MuiThemeProvider there.

Another consideration is being able to build a derivative, DateTimePicker that would incorporate parts of both date and time pickers into a seamless experience.

Any thoughts on how use the DatePickerDialog without the DatePicker?

Upvotes: 3

Views: 6044

Answers (2)

Tom
Tom

Reputation: 9127

tl;dr: You need to provide firstDayOfWeek to <DatePickerDialog>, or it renders in a broken state.

I ran into the same layout problems you did, and the solution was simply to specify more props. I was also running into a problem where clicking anywhere on the dialog caused it to close (i.e. year & month controls were not functional).

I dug around inside the material-ui source to see how <DatePicker> manages the <DatePickerDialog>, and noticed that <DatePicker> always calculates values for every prop that <DatePickerDialog> accepts.

I also saw how to manage open/close.

Here are some relevant code snippets that show how to get it to work:

openDatePicker = (event) => {
    this.dueDatePicker.show();
};


closeDatePicker = () => {
    this.dueDatePicker.dismiss();
};

render() {
    return (
        <DatePickerDialog
            ref={(e) => this.dueDatePicker = e}
            initialDate={this.state.date}
            firstDayOfWeek={0}
            mode="portrait"
        />
    );
}

P.S.: It's funny to me that the date-picking community still has this fetish for marrying datepickers to text boxes. See, for example, this very similar question of mine from 4 years ago re: jQuery.

Upvotes: 4

peter.bartos
peter.bartos

Reputation: 12045

What about hiding the text field component and showing the dialog using ref and then using the onChange callback to get the selected value?

openDatePicker(){
  this.refs.datepicker.openDialog()
}

render(){
  return (
    <div>
      <RaisedButton onTouchTap={this.openDatePicker} label='open date picker' />
      <DatePicker textFieldStyle={{ display: 'none' }} ref='datepicker' />
    </div>
  )
}

Upvotes: 3

Related Questions