@equinor/fusion-wc-date
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published

fusion-wc-date Published on npm

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;

Package Sidebar

Install

npm i @equinor/fusion-wc-date

Weekly Downloads

58

Version

1.1.3

License

ISC

Unpacked Size

707 kB

Total Files

32

Last publish

Collaborators

  • gustav-eikaas
  • eslsa
  • martinforre
  • _odin_