@equinor/fusion-wc-date

fusion-wc-date

Storybook

Installation

npm install @equinor/fusion-wc-date

DateTime <fwc-datetime>

Example Usage

Date

return (
  <fwc-datetime format={DateTimeFormat.date} date='2021-08-09T11:12:49Z' />
);

Date & Time

return (
  <fwc-datetime format={DateTimeFormat.datetime} date='2021-08-09T11:12:49Z' />
);

Time

return (
  <fwc-datetime format={DateTimeFormat.time} date='2021-08-09T11:12:49Z' />
);

Custom

return (
  <fwc-datetime format='yyyy.MM.dd' date='2021-08-09T11:12:49Z' />
);

Alternative format type

The format variable can also be given as a value instead of a typed enum

return (
  <fwc-datetime format='datetime' date='2021-08-09T11:12:49Z' />
);

With custom locale property

return (
  <fwc-datetime format={DateTimeFormat.time} date='2021-08-09T11:12:49Z' locale='nb' />
);

Properties/Attributes

Name	Type	Default	Description
date	string	current date	The date to format in ISO format. See 'ISO_8601'.
format	DateTimeFormat* or string	datetime	Predefined or custom format to use. Based on Unicode Technical Standard #35.
locale	LocaleName**	enGB	Used to override the locale for which the date format is based. See date-fns Locale.

* DateTimeFormat is exported by fwc-date.

enum DateTimeFormat {
  date='dd.MM.yyyy',
  time='HH:mm',
  datetime='HH:mm dd.MM.yyyy',
  time_with_seconds='HH:mm:ss',
  datetime_with_seconds='HH:mm:ss dd.MM.yyyy',
}

** LocaleName is exported by fwc-date. See date-fns Locale for all supported locales.

type LocaleName = 'enGB' | 'enUS' | 'nb' | ...;

Range <fwc-daterange>

Example Usage

Relative

return (
  <fwc-daterange variant='relative' date='2021-08-09T09:12:49Z' baseDate='2021-08-09T11:12:49Z' />
);

Distance

return (
  <fwc-daterange variant='distance' date='2021-08-09T09:12:49Z' baseDate='2021-08-09T11:12:49Z' />
);

Date & Time (From - To)

return (
  <fwc-daterange
    variant='datetime'
    format={DateTimeFormat.datetime}
    date='2021-08-09T09:12:49Z'
    baseDate='2021-08-09T11:12:49Z'
  />
);

Date & Time with custom separator

return (
  <fwc-daterange
    variant='datetime'
    format={DateTimeFormat.datetime}
    date='2021-08-09T09:12:49Z'
    baseDate='2021-08-09T11:12:49Z'
  >
  <span slot='separator'>to</span>
  </fwc-daterange>
);

With custom locale property

return (
  <fwc-daterange
    variant='datetime'
    format={DateTimeFormat.datetime}
    date='2021-08-09T09:12:49Z'
    baseDate='2021-08-09T11:12:49Z'
    locale='nb'
  >
  <span slot='separator'>to</span>
  </fwc-daterange>
);

Slots

Name	Default	Description
separator	<span>-</span>	Separator element to render between from and to dates for variant datetime.

Properties/Attributes

Name	Type	Default	Description
from	string	current date	The date to format in ISO format. See 'ISO_8601'.
to	string	current date	The date to compare with in ISO format. See 'ISO_8601'.
variant	DateRangeVariant*	datetime	Templated variant to use as basis for format calculation, defaults to datetime (HH:mm dd.MM.yyyy - HH:mm dd.MM.yyyy).
format	DateTimeFormat** or string	undefined	Predefined or custom format to use. Based on Unicode Technical Standard #35.
locale	LocaleName***	enGB	Used to override the locale for which the date format is based. See date-fns Locale.
seconds	boolean	false	Set true to include seconds in the distance variant.
weekstart	WeekDay****	1	The index of the first day of the week (0 = Sunday).
suffix	boolean	false	Include a suffix to indicate if the date is before or after the baseDate. Only applies to variant distance.
capitalize	boolean	false	Set true to capitalize the first character in the formatted text. Applies to distance and relative variants.

* DateRangeVariant is exported by fwc-date.

type DateRangeVariant = 'relative' | 'distance' | 'datetime';

** DateTimeFormat is exported by fwc-date.

enum DateTimeFormat {
  date = 'dd.MM.yyyy',
  time = 'HH:mm',
  datetime = 'HH:mm dd.MM.yyyy',
  time_with_seconds = 'HH:mm:ss',
  datetime_with_seconds = 'HH:mm:ss dd.MM.yyyy',
}

*** LocaleName is exported by fwc-date. See date-fns Locale for all supported locales.

type LocaleName = 'enGB' | 'enUS' | 'nb' | ...;

**** WeekDay is exported by fwc-date.

type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;