import * as UI from '../../src/index'

import { Canvas, Meta, Story } from "@storybook/addon-docs";

<Meta title="Date & Time" />

## formatDateTime

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#formatdatetime)

<Canvas withSource="open">
  <Story name="formatDateTime">
    {UI.widgets.formatDateTime(
      new Date(),
      "{FullYear}-{Month}-{Date}T{Hours}:{Minutes}:{Seconds}.{Milliseconds}"
    )}
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="formatDateTime date">
    {UI.widgets.formatDateTime(new Date(), "{Date}.{Month}.{Year}")}
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="formatDateTime time">
    {UI.widgets.formatDateTime(new Date(), "{Hours}:{Minutes}:{Seconds}")}
  </Story>
</Canvas>

## shortDate

By default, converts e.g. '2020-02-19T19:35:28.557Z' to '19:35' if today is 19 Feb 2020, and to 'Feb 19' if not.

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#shortdate)

<Canvas withSource="open">
  <Story name="shortDate (not today & without time)">
    {UI.widgets.shortDate("2020-01-01T15:43", true)}
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="shortDate (with time, but not today)">
    {UI.widgets.shortDate("2020-01-01T15:43", false)}
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="shortDate (today & without time)">
    {UI.widgets.shortDate(new Date().toISOString(), true)}
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="shortDate (today & with time)">
    {UI.widgets.shortDate(new Date().toISOString(), false)}
  </Story>
</Canvas>

## shortTime

Get a short string representation of the current time

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#shorttime)

<Canvas withSource="open">
  <Story name="shortTime">{UI.widgets.shortTime()}</Story>
</Canvas>

## timestamp

Get a string representation of the current time

[API docs](https://solidos.github.io/solid-ui/docs/api/modules/_widgets_buttons_.html#timestamp)

<Canvas withSource="open">
  <Story name="timestamp">{UI.widgets.timestamp()}</Story>
</Canvas>
