CODEWITHSUNDEEP
reactjscalendarmaterial-ui
whimsicalprogrammer
whimsicalprogrammer

Reputation: 33

Material UI datetime-local input open the calendar dropdown

I am using the following code, taken from https://material-ui.com/components/pickers/#date-time-pickers

<form className={classes.container} noValidate>
  <TextField
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Now, what I want to do is when the user clicks anywhere in the input, open the calendar drop down.At the moment it only opens if the user clicks the calendar icon. I've looked at other answers but did not get anything.

Thanks.

Upvotes: 0

Views: 5150

Answers (1)

bryyytl
bryyytl

Reputation: 491

I suggest checking out the @material-ui/pickers library (which is developed by the same team) as opposed to using a TextField component with datetime styling.

The following example comes from https://material-ui-pickers.dev/getting-started/usage:

import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns'; // choose your date lib
import {
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';

const App = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

export default App;

Resources:

Edit:

As of Material UI V5 (still in alpha stage), @material-ui/pickers will become part of the Material UI Lab package.

Resources:

Upvotes: 2

Related Questions