Material UI DateTime Picker

@material-ui/pickers³.3.10, @date-io/date-fns¹.3.13, date-fns².22.1, , Material UI⁴.11, React¹⁷.0.2, Created at July 21, 2021, Read Series…

@material-ui/pickers is move to @material-ui/lab when @material-ui V5.
@material-ui/pickers provides date/time pickers with datetime utility.
Choose date-fns as datetime utility, because date-fns is using Date type as input, although moment is more popular.

npm i @material-ui/pickers
npm i date-fns @date-io/date-fns@1.x

src/index.tsx

[Try to understand] MuiPickersUtilsProvider: takes a utils prop, and makes it available down the React tree with React Context.
[Try to understand] DateFnsUtils, is the datetime utility.

import React from 'react';
import { Suspense } from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import App from './App';
import theme from './theme';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './store/Store';
import { BrowserRouter } from 'react-router-dom';
import { CookiesProvider } from 'react-cookie';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
ReactDOM.render(
  <Suspense fallback={<div>...</div>}>
    <CookiesProvider>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <CssBaseline />
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <App />
            </MuiPickersUtilsProvider>
          </BrowserRouter>
        </ThemeProvider>
      </Provider>
    </CookiesProvider>
  </Suspense>,
  document.querySelector('#root'),
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<KeyboardDatePicker/> with redux-hook-form

[Try to understand] KeyboardDatePicker, Controller in redux-hook-form
[Try to understand] birthDay, data binding example.

import { KeyboardDatePicker } from '@material-ui/pickers';
export default function DateTimePickerForm(): JSX.Element {
...
    const formValidation = {
...
    birthDay: { required: 'Birth Day required' }
  };
  return (
    <form className={classes.root} onSubmit=                   
              {handleSubmit(onSubmit)}>
... 
      <Controller
        name="birthDay"
        control={control}
        defaultValue={new Date()}
        render={({field: {onChange, value}, fieldState: {error}})=>(
          <KeyboardDatePicker
            clearable
            format="MMM dd, yyyy"
            views={["year", "month", "date"]}
            inputVariant="outlined"
            value={value}
            onChange={onChange}
            error={!!error}
            helperText={error ? error.message : null}/>
        )}
        rules={formValidation.birthDay}
      />
...   
    </form>
  );
};

Github commits is here: Basic-1.12. @material-ui/pickers and date-fns

Conclusion

Example which implements Date and Time picker using the material Ui’s pickers package as well as the Native <TextField /> and custom <TextField /> component.
[Important] use @date-io/date-fns@1.x instead of ^2.x