@equinor/fusion-wc-date v1.1.3

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

* 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

Properties/Attributes

* 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;