React Datetime v2.16.3

We've used react-datetime for this component and we've restyled it to match our theme.

Please refer to react-datetime documentation for more information.

Styles

You will find the styles for this component in
src/assets/scss/plugins/_plugin-react-datetime.scss.

If you want to match the input of this plugin with the inputs from Material-UI, please take a look at this issue here: https://github.com/creativetimofficial/nextjs-material-kit/issues/20

Example

Datetime Picker

‹	August 2022	›
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10
12:00 AM

import React from 'react';
// react component plugin for creating a beautiful datetime dropdown picker
import Datetime from "react-datetime";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
// @material-ui/icons
// core components

const styles = {
  label: {
    cursor: "pointer",
    paddingLeft: "0",
    color: "rgba(0, 0, 0, 0.26)",
    fontSize: "14px",
    lineHeight: "1.428571429",
    fontWeight: "400",
    display: "inline-flex"
  },
};

const useStyles = makeStyles(styles);

export default function DateTimePicker(){
  const classes = useStyles();
  return (
    <div>
      <InputLabel className={classes.label}>
        Datetime Picker
      </InputLabel>
      <br />
      <FormControl fullWidth>
        <Datetime
          inputProps={{ placeholder: "Datetime Picker Here" }}
        />
      </FormControl>
    </div>
  );
}