import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Datepicker } from './datepicker.component';

<Meta title="Components/Inputs/Datepicker" component={Datepicker} />

# Datepicker

Datepicker supports the following props:

- `label`
- `value`
- `disabledDates`: an array of JS Date objects to disable from the calendar
- `disableWeekends`
- `disablePastDates`

Datepicker supports the following events:

- `onChange={value => console.log('Omg look a', value)}` where `value` is the selected date in the form of a JS Date object

## ️️️⚠️ Time Zone Notice ⚠️

This Datepicker, like many others, returns the Date object that was selected in the local time zone.

This means that when it's 11pm on Saturday Nov 17 in Toronto (EST) it'll be 4am on Sunday Nov 18 in London (UTC).

If you do select Nov 17th while in Toronto at 11pm, the date that's retrieved from Datepicker will look like this:

    2018-11-18T04:00:00.000Z

While the server _should_ be smart enough to utilize the time zone data to find the "real" date, [in the past](https://github.com/wealthsimple/terminal/pull/3781) this has not happened.

## Recommended Usage

When sending dates to the server it's possible to mitigate any time zone issues by simply constructing a date using the date parts:

    `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`

**Disclaimer:** There's probably better ways to do this

## Normal

<Canvas>
  <Story id="components-inputs-datepicker--normal" height="300px" />
</Canvas>

## Reset Programatically

<Canvas>
  <Story
    id="components-inputs-datepicker--reset-programatically"
    height="300px"
  />
</Canvas>

## With Weekend Date Disabled

<Canvas>
  <Story
    id="components-inputs-datepicker--with-weekend-dates-disabled"
    height="300px"
  />
</Canvas>

## With Custom Date Disabled

<Canvas>
  <Story
    id="components-inputs-datepicker--with-custom-dates-disabled"
    height="300px"
  />
</Canvas>

## With Past Date Disabled

<Canvas>
  <Story
    id="components-inputs-datepicker--with-past-dates-disabled"
    height="300px"
  />
</Canvas>

## With Everything Disabled

<Canvas>
  <Story
    id="components-inputs-datepicker--with-everything-disabled"
    height="300px"
  />
</Canvas>

## With En-GB Locale

<Canvas>
  <Story id="components-inputs-datepicker--with-en-gb-locale" height="300px" />
</Canvas>

## With En-US Locale

<Canvas>
  <Story id="components-inputs-datepicker--with-en-us-locale" height="300px" />
</Canvas>

## Label Styles

Floating labels are the preferred design going forward. However for legacy purposes we also support an "external" label style:

<Canvas>
  <Story id="components-inputs-datepicker--external-label" />
</Canvas>

<Canvas>
  <Story id="components-inputs-datepicker--external-large-label" />
</Canvas>