How to create moment.js or use time ago localized date format in JavaScript

Author image
Author

Fashanu T.

25, Jan 2021

2 Minutes Read...


Introduction

You can now localize date formatting, both past and present in human readable format and in any language using the latest API. It format date in readable form like in moment.js, i.e:

  • 1 minute ago
  • 2 months ago
  • in 3 months
  • just now
  • 4 years ago

Code dependencies like moment.js will be depreciated soon, and if you ever wondered how those time format were created, keep reading.

JavaScript has its own international localization API now, and that is the more reason people are opting out of using moment.js and its equivalent. You no longer need to install, or add lengthy minified lines of code to enjoy the benefit human readable time and its faster.

I created a project using the latest API and with no longer than 80 lines of code to get the basic, and most important functionality of time ago or moment.js that you need. You can check the project out here

I provided three options for installation:

Option A. NPM installation:

npm install javascript-timeframe --save

Option B. Using CDN:

You can load timeframe directly from jsDelivr CDN with the url below.

https://cdn.jsdelivr.net/gh/johnerry/javascript-timeframe/src/timeframe.js

For example, place this in your HTML:

html
<script src="https://cdn.jsdelivr.net/gh/johnerry/javascript-timeframe/src/timeframe.js"></script>

Option C. Using CDN:

Copy the timeframe.js file containing only few lines of code to your project, and load it.

html
<script src="timeframe.js"></script>

Use

javascript
import {timeFrame} from 'javascript-timeframe';
// skip the above if you are not loading from a node package. const date = new timeFrame('2020-05-17T03:24:00'); //const date = new timeFrame(1589682240); unix date.startingDate('2020-01-10T04:04:05'); // date.language('es'); spanish date.language('en'); // english console.log( date.moment() ); // in 4 months console.log( date.unix() ); // 1589682240

new timeFrame() accepts all argument that a regular Date method can, including unix time numbers.

if you do not specify a startingDate(//date argument), timeFrame automatically uses the current time, which is Date.now() for comparison.

Other functionality

javascript
const date = new timeFrame('2020-05-17T23:24:00');
  
  console.log( date.now() );
  // returns the current milliseconds rather that the argument passed into timeFrame
  //  1611501800638
  
  console.log( date.unix() );
  // 1589754240
  // returns unix time interger of passed argument since january 1st 1970
  
  console.log( date.milliseconds() );
  // 0
  // returns milliseconds of passed argument

 console.log( date.seconds() );
 // 0
 // returns seconds in passed argument
 
 console.log( date.minutes() );
 // 24
 //returns minutes in passed argument
 
 console.log ( date.hours().long(), date.hours().short() );
 // 23, 11
 //returns hours in passed argument

console.log ( date.ampm() ); // pm //returns am or pm in passed argument console.log( date.day() ); // 17 //return the day in passed argument console.log( date.month() ); // May //return the month in the passed argument console.log( date.year() ); // 2020 //return the year in passed argument

Format date in local language

Library lets you format date and time in your local language.

If no argument is matched, the "default language" is used, and the default language is "en" by default.

Note: only moment method can use localization in other languages and not the other methods in timeFrame class.
const date = new timeFrame('2020-05-17T03:24:00');

date.language('en'); // English

date.language('ru'); // Russian

date.language('de');  // German

date.language('th');  // Thai

date.language('es'); // Spanish

console.log ( date.moment() );
// hace 8 meses

Future time format

When future date are provided, moment()  return results like:

javascript
const date = new timeFrame('2021-05-17T03:24:00');
  console.log( date.moment() );
  //  in 3 months

This GitHub repository can be found here. And if you find the project useful, make sure to leave a star for me to keep creating useful tools in the future 😎.