1. Gerekli bağımlılıkların yüklenmesi 4.

   npm install @mui/lab @mui/material @mui/x-date-pickers date-fns react-hook-form

   komutu ile gerekli paketler yüklenebilir 4.
2. Temel kurulum 4.

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { TextField, Button } from '@mui/material';

export default function DatePickerForm() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <Controller
          name="date"
          control={control}
          defaultValue={null}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <DatePicker
              label="Select Date"
              value={value}
              onChange={onChange}
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={!!error}
                  helperText={error?.message}
                />
              )}
            />
          )}
        />
      </LocalizationProvider>
      <Button type="submit" variant="contained">
        Submit
      </Button>
    </form>
  );
}
Kopyala

3. Doğrulama işlemlerinin yapılması 4.

   Controller

   içinde

   rules

   prop'u kullanılarak gerekli doğrulama kuralları eklenebilir 4.
4. Varsayılan tarih değerinin ayarlanması 4.

   const { control } = useForm({ defaultValues: { date: new Date() }, })

   kodu ile DatePicker'ın bir değerle başlatılması sağlanabilir 4.