CODEWITHSUNDEEP
javascriptmaterial-designmaterial-ui
celiao
celiao

Reputation: 56

Material-UI: How to put two Date Pickers on same line?

I am creating a form using material-ui.

I can display two SelectFields on the same line with:

<SelectField floatingLabelText="Selection One" menuItems={menuItems} />
<SelectField floatingLabelText="Selection Two" menuItems={menuItems} />

or on two lines with:

<SelectField floatingLabelText="Selection One" menuItems={menuItems} /><br />
<SelectField floatingLabelText="Selection Two" menuItems={menuItems} />

However, the following code results in two lines:

<DatePicker floatingLabelText="Start Date" />
<DatePicker floatingLabelText="Completion Date" />

How can I display two DatePickers on the same line (without using minDate and maxDate)?

Upvotes: 0

Views: 1946

Answers (1)

celiao
celiao

Reputation: 56

It's a bit of a hack, but enclosing the DatePickers in a table works:

<table>
  <tbody>
    <tr>
      <td>
        <DatePicker floatingLabelText="Start Date" />
      </td>
      <td>
        <DatePicker floatingLabelText="Completion Date" />
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions