import Ad from '_shared/Ad';
import PageMeta from '_shared/PageMeta';
import { NoSsr } from '@material-ui/core';
import { CODESANDBOX_EXAMPLE_ID } from '_constants';

<PageMeta title="Usage" description="Simple usage example of @material-ui/pickers" />

## Usage

@material-ui/pickers relies only on material-ui controls and the date management library of your choice. Please note that all components are controlled, meaning that it's required to pass the `value` and `onChange` props.

<Ad />

#### Quick start

**Note** `onChange` has a second parameter. So if you will not do `onChange={date => handleDateChange(date)}` you will get the console warning that [useState hook does not accept a second callback argument.](https://github.com/facebook/react/issues/14174)

```jsx
import * as React from 'react';
import DateFnsAdapter from '@material-ui/pickers/adapter/date-fns'; // choose your lib
import { DatePicker, TimePicker, DateTimePicker, LocalizationProvider } from '@material-ui/pickers';

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

  return (
    <LocalizationProvider dateAdapter={DateFnsUtils}>
      <DatePicker
        renderInput={(props) => <TextField {...props} />}
        value={selectedDate}
        onChange={(date) => handleDateChange(date)}
      />
      <TimePicker
        renderInput={(props) => <TextField {...props} />}
        value={selectedDate}
        onChange={(date) => handleDateChange(date)}
      />
      <DateTimePicker
        renderInput={(props) => <TextField {...props} />}
        value={selectedDate}
        onChange={(date) => handleDateChange(date)}
      />
    </LocalizationProvider>
  );
}
```

<NoSsr>
  <iframe
    title="codesandbox"
    src={`https://codesandbox.io/embed/${CODESANDBOX_EXAMPLE_ID}?hidenavigation=1&fontsize=14&view=preview&file=/src/App.jsx`}
    style={{
      width: '100%',
      height: 650,
      border: 0,
      borderRadius: 4,
      overflow: 'hidden',
    }}
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
  />
</NoSsr>