Formats a date or date range to be easily readable and reveals the absolute date on hover.
You should have the chayns-components package installed. If that is not the
case already, run
yarn add chayns-componentsor
npm i chayns-componentsAfter the chayns-components package is installed, you can import the component
and use it with React:
import React from 'react'
import { DateInfo } from 'chayns-components';
// ...
<DateInfo {...} />The DateInfo-component takes the following props:
| Name | Type | Default | Required |
|---|---|---|---|
| children | ReactNode |
<div /> |
|
| language | string |
||
| date | string | number | Date |
✓ | |
| date2 | string | number | Date |
||
| showTime | boolean |
||
| showDate | boolean |
||
| writeDay | boolean |
false |
|
| writeMonth | boolean |
||
| noTitle | boolean |
false |
|
| useToday | boolean |
||
| useTomorrowYesterday | boolean |
||
| hideYear | boolean |
false |
children?: ReactNodeThe node the text is written into.
language?: stringThe language of the text as an ISO 3166-1 alpha-2 string.
date: string | number | Date;The date that should be formatted. If a date range is supplied, this should be
the earier date. You can supply a date as the number of milliseconds since 1970,
ISO-8601 string or via a JavaScript Date-object,
date2?: string | number | DateThe later date for a date range.
showTime?: booleanWether the formatted text should show the time.
showDate?: booleanWether the formatted text should show the date.
writeDay?: booleanWether the day of the week should be written out.
writeMonth?: booleanDetermines how to write the month. If true, the whole name will be written out
("december"), if false only the number will be displayed ("12."), otherwise it
will show the short form of the month ("dec.").
noTitle?: booleanSet this to true if the title-attribute should not be added to the children.
useToday?: booleanWether the component should say "today" if the date matches today.
useTomorrowYesterday?: booleanWether the component should use "tomorrow" and "yesterday".
hideYear?: booleanWhen true the year will be omitted from the output, if null the year will be
shortened ("20" for 2020). When this is false, the full year will be shown.