README

Clever Date

npm npm starts

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/clever-date@2.0"></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.

Usage no npm install needed!