@date-js/clever-date
v2.2.0
Published
A Javascript module to show an intelligent date refreshed at regular intervals.
Downloads
3
Maintainers
Readme
Clever Date
A javascript library (<10kB) to show an intelligent date refreshed at regular intervals.
Demo
A demo is available here.
Supported languages
Languages defined bellow are fully supported but you can add your own rules with other languages.
- English
- Français
You can also contribute and suggest translations with a pull request.
Example
Add an attribute to your date with the corresponding timestamp.
<div data-clever-date="1579950627">26/01/2020 12h12</div>
<div data-clever-date="1580037027">25/01/2020 12h12</div>
Start the script:
CleverDate.start();
Let's see the result:
<div title="26/01/2020 12h12">2 minutes ago</div>
<div title="25/01/2020 12h12">Yesterday at 12:12</div>
Some possible results:
- Just now / A l'instant
- 2 minutes ago / Il y a 2 minutes
- 2 hours ago / Il y a 2 heures
- Today at 11:46 / Aujourd'hui à 11h46
- Yesterday at 11:46 / Hier à 11h46
Install
ES6
npm install @date-js/clever-date
import CleverDate from '@date-js/clever-date';
Otherwise
<script src="https://cdn.jsdelivr.net/npm/@date-js/[email protected]"></script>
Usage
Start the process :
CleverDate.start();
Stop the process:
CleverDate.stop();
If you add element dynamically.
window.dispatch(new Event('clever-date.update'));
Customize it
You have the full possibility to customize your rules by passing your configuration.
var configuration = {
refresh: 5, // The minimal refreshing time
selector: 'data-clever-date', // Elements with this attribute will be parsed
rules: [
{
condition: function(dateIntervalItem) { return dateIntervalItem.day >= 365*10; }, text: {
fr: "Il y a %dd jour{%dd||s} (année %Y)",
en: "%dd day{%dd||s} ago (year %Y)"
}
}
]
}
CleverDate.start(configuration);
How create rules ?
You can see examples in default rules file.
A rule is composed of some elements:
condition
A callback which returns true if the rule matches.
DateInterval is injected in the callback: see DateInterval.ts for more information.
refresh
For improving performances, it's not necessary to analyse and parse your rule each time.
- null: never analysed again
- undefined: use default refreshing time
- number: seconds between analyses
text
An object with the text for each language that you want to target.