How to directly open the time picker dialog?

[Aditya94A]

From here, I'm using the same code as in the example:

const { default: Dialog, DialogActions } = require('material-ui/Dialog');
const Button = require('material-ui/Button').default;

<div>
  <Button
    onClick={() => setState({ open: true })}
  >
    Open time picker
  </Button>
  <Dialog
    maxWidth='xs'
    open={state.open}
  >
    <TimePicker mode='24h' />
    <DialogActions>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Cancel
      </Button>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Ok
      </Button>
    </DialogActions>
  </Dialog>
</div>

But for some reason the dialog I'm getting is

And only when I click the time 11:00am do I get:

How do I just get to the second image directly?

[leMaik]

You need to use the TimePicker, which (unfortunately) isn't the default export. The default export is the TimeInput. I'll extend the examples soon to include the import line. Edit: Done!

import Dialog, { DialogActions } from 'material-ui/Dialog'
import Button from 'material-ui/Button'
import { TimePicker } from 'material-ui-time-picker'

<div>
  <Button
    onClick={() => setState({ open: true })}
  >
    Open time picker
  </Button>
  <Dialog
    maxWidth='xs'
    open={state.open}
  >
    <TimePicker mode='24h' />
    <DialogActions>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Cancel
      </Button>
      <Button onClick={() => setState({ open: false })} color='primary'>
        Ok
      </Button>
    </DialogActions>
  </Dialog>
</div>

[Aditya94A]

Yup, that did it