Material-UI pickers
2.2.2

Usage#

Material-UI-pickers rely only on material-ui controls and the date-management lib you have choose. Please note that all components are controlled, thats means that its required to pass value and onChange props.

Quick start#

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

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

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <div className="pickers">
        <DatePicker value={selectedDate} onChange={handleDateChange} />
        <TimePicker value={selectedDate} onChange={handleDateChange} />
        <DateTimePicker value={selectedDate} onChange={handleDateChange} />
      </div>
    </MuiPickersUtilsProvider>
  );
}