@equinor/fusion-wc-date v1.1.2
fusion-wc-date
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;
29 days ago
2 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago