jQuery Relative Time Plugin for Human-Readable Dates – niceDate

niceDate is a light-weight jQuery plugin that converts date strings into human-readable relative time textual content.

It turns dates into phrases reminiscent of “Yesterday,” “3 hours in the past,” or “Tomorrow,” refreshes these values at a set interval, and restores the unique date textual content on hover.

Options:

• Relative minute, hour, and day textual content for previous and future dates.
• Calendar-date formatting for dates no less than 30 days away.
• Automated timestamp refresh at a configurable interval.
• Authentic date textual content on mouse hover.
• Day-only show mode.
• Customized date parsing by means of a callback.
• Configurable month, day, hour, and minute messages.
• Locale recordsdata for Slovenian, Spanish, German, Russian, Turkish, and extra.

How To Use It:

1. Obtain and place the niceDate script after the newest jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.niceDate.js"></script>

2. Place the supply date inside every aspect that niceDate ought to format.

<time class="nice-date">28.09.2026 09:30</time>
<time class="nice-date">03.10.2026 18:00</time>

3. Initialize the plugin and executed.

$(operate() {
  $('.nice-date').niceDate();
});

4. All plugin configuration choices.

• nowDateObject (Date|null, default null): Units the date used because the preliminary reference time. null makes use of the browser’s native time.
• makeTimestamp (Perform): Converts the aspect textual content right into a JavaScript Date object. Return false for an invalid worth.
• sample (RegExp): Defines the common expression utilized by the built-in date parser.
• patternOrder (Array, default [3, 2, 1, 4, 5]): Maps matched teams to 12 months, month, day, hour, and minute.
• dayOnly (Boolean, default false): Makes use of day-level messages and skips minute and hour output.
• hoverShow (Boolean, default true): Shows the unique aspect content material throughout mouse hover.
• autoUpdateInterval (Quantity, default 60000): Units the refresh interval in milliseconds. Set it to 0 to disable computerized refresh.
• monthMessages (Array): Shops the month names used for calendar-date output.
• dayMessages (Object): Shops previous and future textual content for right now, yesterday, tomorrow, and multi-day offsets.
• hourMessages (Object): Shops singular and plural previous and future hour textual content.
• minMessages (Object): Shops singular and plural previous and future minute textual content.

$('.article-date').niceDate({
  hoverShow: false,
  autoUpdateInterval: 30000
});

5. Recalculate the relative textual content utilizing the browser’s current time.

$('.nice-date').every(operate() {
  $(this).information('plugin_niceDate').replace();
});

Options And Associated Assets

This superior jQuery plugin is developed by silvester. For extra Superior Usages, please examine the demo web page or go to the official web site.