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

# Datepicker

<Meta
  title='Datepicker'
  component='fw-datepicker'
/>

## Props

<Props of="fw-datepicker"/>

## Usage

### Default
<Preview>
<Story name='Default'>{() => '<fw-datepicker></fw-datepicker>'}</Story>
</Preview>

### DateRangePicker
<Preview>
<Story name='DateRangePicker'>{() => '<fw-datepicker mode="range"></fw-datepicker>'}</Story>
</Preview>

### HideFooter
<Preview>
<Story name='hideFooter'>{() => '<fw-datepicker show-footer="false"></fw-datepicker>'}</Story>
</Preview>

### clearInput
<Preview>
<Story name='clearInput'>{() => '<fw-datepicker clear-input></fw-datepicker>'}</Story>
</Preview>

### minDate and maxDate specified
<Preview>
<Story name='minDate and maxDate specified'>{() => '<fw-datepicker min-date="2020-04-10" max-date="2020-09-29"></fw-datepicker>'}</Story>
</Preview>

### Date Format and Placeholder specified
<Preview>
<Story name='Date Format and Placeholder specified'>{() => '<fw-datepicker display-format="dd-MMMM-yyyy" placeholder="Pick a Date"></fw-datepicker>'}</Story>
</Preview>
