npm install @equinor/fusion-wc-date
return (
<fwc-datetime format={DateTimeFormat.date} date='2021-08-09T11:12:49Z' />
);
return (
<fwc-datetime format={DateTimeFormat.datetime} date='2021-08-09T11:12:49Z' />
);
return (
<fwc-datetime format={DateTimeFormat.time} date='2021-08-09T11:12:49Z' />
);
return (
<fwc-datetime format='yyyy.MM.dd' date='2021-08-09T11:12:49Z' />
);
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' />
);
return (
<fwc-datetime format={DateTimeFormat.time} date='2021-08-09T11:12:49Z' locale='nb' />
);
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' | ...;
return (
<fwc-daterange variant='relative' date='2021-08-09T09:12:49Z' baseDate='2021-08-09T11:12:49Z' />
);
return (
<fwc-daterange variant='distance' date='2021-08-09T09:12:49Z' baseDate='2021-08-09T11:12:49Z' />
);
return (
<fwc-daterange
variant='datetime'
format={DateTimeFormat.datetime}
date='2021-08-09T09:12:49Z'
baseDate='2021-08-09T11:12:49Z'
/>
);
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>
);
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>
);
Name | Default | Description |
---|---|---|
separator |
<span>-</span> |
Separator element to render between from and to dates for variant datetime . |
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;