Update docs for DatePicker

[tw15egan]

This issue is to update the stories that we have for the component in our storybook. This work includes the following:

• Update each story in <DatePicker>-story.js to Component Story Format
  • There is an optional codemod that you can use from storybook:
  • npx -p @storybook/cli@next sb migrate storiesof-to-csf --glob='packages/react/src/<Component>/<Component>-story.js'
• Update stories in the existing file, including:
  • Create a default example named after the component without any knobs (should match the first example in the overview section)
  • Clean-up or streamline any stories that seem to need it
  • Create a Playground story that uses knobs for the component
    • For any other components that use knobs, add a <DatePicker> Playground story
• Create a <DatePicker>.mdx file and fill it out according to the template below
  • You should import the mdx file in your story and pass it as an option to the story config (see example below)
  • You can refer to stories by their story id from <DatePicker>-story.js in <DatePicker>.mdx
• Document any usage mishaps for v11

Template

import { Story, Preview, Props } from '@storybook/addon-docs/blocks';

# <Component name>

## Overview
<!--
This should include the default use-case(s) for a component, at most 2.
This should be the most common way the component is used.
It should summarize what this common is for and provide snippets for how
to accomplish these common use-cases
-->

<Preview>
  <Story id="story-id" />
</Preview>

## [Use case, for example, Skeleton state or Sorting]
<!--
Each use-case of this component becomes its own section. For example,
if the component had a skeleton then you would name this section Skeleton.

If the component had a specific piece of functionality or behavior, like
how you can sort with a Data Table, then Sorting would be the name of this
section.

This section should include an explainer for the use-case and when to use it,
along with a code snippet that someone could bring into their project.
-->

## Component API

<Props />

### [Component name] [prop name]
<!--
Used to clarify prop usage, provide additional info or snippets
-->


## References
<!--
A place for references, links, or a way clarify points made earlier
in the documentation.
-->

## Feedback

Help us improve this component by providing feedback through, asking questions on Slack, or
updating this file on GitHub
[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/<Component>/<Component>.mdx).

Configure story to use MDX page

import mdx from './Component.mdx';

export default {
  title: 'Component',
  component: Component,
  parameters: {
    docs: {
      page: mdx,
    },
  },
}