import { Canvas, Meta, Source, Story } from "@storybook/addon-docs/blocks";
import * as DateFieldStories from './DateField.stories';

<Meta
  title="Components/Atoms/Date Field"
  of={DateFieldStories}
  parameters={{ viewMode: 'docs'}}
/>

# Date Field

<Source
  language="ts"
  code={`import { FormHelperText, FormLabel } from "@mui/material";
import { DateField, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";`} />

## How to use this component

This component uses the MUI Date Field component.
You can see the documentation here: https://mui.com/x/react-date-pickers/date-field/

## Default

<Canvas of={DateFieldStories.Default} />

## Format

<Canvas of={DateFieldStories.Format} />

## Month And 4 Digit Year

<Canvas of={DateFieldStories.MonthAndYear} />

## Error

<Canvas of={DateFieldStories.Error} />

## onChange Error Checking

<Canvas of={DateFieldStories.OnchangeErrorChecking} />

## onSubmit Error Checking

<Canvas of={DateFieldStories.OnsubmitErrorChecking} />
