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>
);
}