CODEWITHSUNDEEP
reactjsmaterial-ui
Champer Wu
Champer Wu

Reputation: 1271

The Material ui DatePicker can use like component without dialog?

I want to use the DatePicker in Material UI, and I want it always show in the template, but the default of DatePicker is focused the Textfield and show the Dialog.

Does it possible to show DatePicker without using Dialog and focused Textfield. Let it always show the DatePicker Component at the render show?

Upvotes: 1

Views: 6429

Answers (2)

Vlad Povalii
Vlad Povalii

Reputation: 1640

[Solution for the material-ui v0.x]

If I understood you correctly, you want to display Calendar component from DatePicker without any dialog and input. If that is your case, you can import the inner Calendar component like this:

import Calendar from 'material-ui/DatePicker/Calendar';

and then render, for example:

<Calendar 
    autoOk={false}
    cancelLabel={false}
    firstDayOfWeek={1}
    onTouchTapDay={this.handleTouchTapDay}
    mode={'portrait'}
    open={true}
    ref="calendar"
/>

There is some other props that is available for Calendar, that I hadnt use for this example. You can find them here in the source code of Calendar:

Here is what I got after render:

enter image description here

[Solution for the material-ui 4x]

In v4 Date pickers came in a separate package, @material-ui/pickers

Here is the documentation on this.

The code is pretty much the same, except that for a new pickers it is required to wrap them with MuiPickersUtilsProvider. Here is a simplest example:

import React from "react";
import { render } from "react-dom";

import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider, Calendar } from "@material-ui/pickers";

render(
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Calendar date={new Date()}/>
  </MuiPickersUtilsProvider>,
  document.querySelector("#root")
);

Sandbox

Upvotes: 6

Ejaz Karim
Ejaz Karim

Reputation: 3696

Yes it is possible:

<div>
  <DatePicker hintText="Portrait Inline Dialog" container="inline" />
</div>

container prop:

Used to control how the Date Picker will be displayed when the input field is focused. dialog (default) displays the DatePicker as a dialog with a modal. inline displays the DatePicker below the input field (similar to auto complete).

Upvotes: 3

Related Questions