$ pnpm add  @mui/x-date-pickers dayjs @mui/material @emotion/react @emotion/styled

'use client';

import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import clsx from 'clsx';
import React from 'react';

import './global.css';

/** Date(共通UI) */
export const CommonDatePicker = React.memo(function CommonDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker />
    </LocalizationProvider>
  );
});

<DatePicker value={dayjs()} />

<DatePicker />

<TimePicker />

<DateTimePicker />

<DatePicker label="label" />

<div className="mb-2">
  <DatePicker value={dayjs()} label="readOnly" readOnly />
</div>
<div>
  <DatePicker value={dayjs()} label="disabled" disabled />
</div>

<div className="mb-2">
  <DatePicker label="年月のみ" views={['year', 'month']} />
</div>
<div>
  <DatePicker label="日のみ" views={['day']} />
</div>

<DatePicker
  value={dayjs()}
  slotProps={{
    textField: {
      helperText: 'ヘルパーテキスト',
    },
  }}
/>

<DatePicker
  value={dayjs()}
  slotProps={{
    field: {
      clearable: true,
    },
  }}
/>

<DatePicker value={dayjs()} format="YYYY-MM-DD" />

<TimePicker />

<TimePicker views={['hours', 'minutes', 'seconds']} />

<TimePicker views={['minutes', 'seconds']} />

<TimePicker views={['hours', 'minutes', 'seconds']} format="HH:mm:ss" />

<TimePicker views={['hours', 'minutes', 'seconds']} format="A hh:mm:ss" />

<TimePicker views={['hours', 'minutes', 'seconds']} format="HH:mm:ss" ampm={false} />