How to programmatically close DataPicker in Material UI?

Question

JavaScript

I'm trying to close the datapicker using my function. I did not find anything in the documentation that could help in this matter.

Answer 1

DatePicker consists of two components: TextField and DatePickerDialog. You do not have access to the DatePickerDialog in the DatePicker context, besides, the state of the dialog is stored in the state of the component itself, so you need to use the DatePickerDialog itself directly. It has functions to change its state: dismiss() and show().

import React from 'react';
import DatePickerDialog from 'material-ui/DatePicker/DatePickerDialog';

export default class SomeComponent extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.closeDatePicker = this.closeDatePicker.bind(this);
    this.openDatePicker = this.openDatePicker.bind(this);
  }

  closeDatePicker() {
    this.datePicker.dismiss();
  }

  openDatePicker() {
    this.datePicker.show();
  }

  render() {
    return (
      <div>
        <button onClick={this.openDatePicker}>Open</button>
        <button onClick={this.closeDatePicker}>Close</button>
        <DatePickerDialog ref={ref => this.datePicker = ref} />
      </div>
    );
  }
}