Material-UI React Datetime

A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same time.

Example

Unfortunately, we are experiencing some difficulties with our live preview docs, and for some reason, the code demo does not work for this plugin and components. 

import React from "react";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
// @material-ui/core components
import Box from "@material-ui/core/Box";
import FilledInput from "@material-ui/core/FilledInput";
import FormControl from "@material-ui/core/FormControl";
import InputAdornment from "@material-ui/core/InputAdornment";
// @material-ui/icons components
import DateRange from "@material-ui/icons/DateRange";

function Datepicker() {

  const inputProps = {
    placeholder: "Date Picker Here",
  }

  return (
    <>
      <ReactDatetime
        timeFormat={false}
        inputProps={inputProps}
        renderInput={(dateInputProps, open, close) => (
          <FormControl
            variant="filled"
            component={Box}
            width="100%"
            marginBottom="1rem!important"
          >
            <FilledInput
              onBlur={close}
              onFocus={open}
              {...dateInputProps}
              startAdornment={
                <InputAdornment position="start">
                  <DateRange />
                </InputAdornment>
              }
            />
          </FormControl>
        )}
      />
    </>
  );
}

export default Datepicker;

Props

If you want to see more examples and properties please check the Official Github Repository.