Using Moment JS in React Native

Moment.js as a better way to calculate date and time

If you are working in React Native or any other JavaScript framework, then you must have once come across using Time or Date in a formatted manner as per the requirements. Usually, in the case of React Native, we fetch this data using JSON or the JavaScript Date function. But while using that we get an odd-looking string, which is a combination of both date and time with time zones in an odd format. Here comes a library made just for that.

Introduction

This library is designed to help developers learn to better interact with the date and time problem domain. It addresses our most frequently seen Date and Time requests here, so it’s a great place to check for solutions to any issues you may have.

Installation: How to install Moment.js

Just run the following command in your terminal, and you are done; there is no need to run any other link or command to link it to your project. This tutorial is for React Native, so you can install the npm command as follows:

npm install moment --save   

JavaScript Date

If you are using JavaScript function for the date, Moment.js provides a wrapper for the native JavaScript date object. In doing this, Moment.js extends the functionality and also accounts for several deficiencies in the object.

Parsing is notably unpredictable with the native date. For instance, suppose I am using a computer in the United States, but I have a date in DD/MM/YYYY format.

var a = new Date('01/12/2016'); //December 1 2016 in DD/MM/YYYY format
//"Tue Jan 12 2016 00:00:00 GMT-0600 (Central Standard Time)"

There is no good workaround for this behavior with the native Date object. Moment’s parser handles it just fine, however:

moment('01/12/2016', 'DD/MM/YYYY', true).format()
"2016-12-01T00:00:00-06:00"

You can look into the code snippet below to get a better idea if you don’t understand these formats. You can also go to your browser console and check out all these commands with proper inputs and format. Some of the popular formats you can use are as follows.

Date

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 13th 2018, 5:25:14 pm
moment().format('dddd');                    // Thursday
moment().format("MMM Do YY");               // Dec 13th 18
moment().format('YYYY [escaped] YYYY');     // 2018 escaped 2018

Time

moment("20111031", "YYYYMMDD").fromNow(); // 7 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 6 years ago
moment().startOf('day').fromNow();        // 17 hours ago
moment().endOf('day').fromNow();          // in 7 hours
moment().startOf('hour').fromNow();       // 26 minutes ago

Calendar

moment().subtract(10, 'days').calendar(); // 12/03/2018
moment().subtract(6, 'days').calendar();  // Last Friday at 5:25 PM
moment().subtract(3, 'days').calendar();  // Last Monday at 5:25 PM
moment().subtract(1, 'days').calendar();  // Yesterday at 5:25 PM
moment().calendar();                      // Today at 5:25 PM
moment().add(1, 'days').calendar();       // Tomorrow at 5:25 PM
moment().add(3, 'days').calendar();       // Sunday at 5:25 PM
moment().add(10, 'days').calendar();      // 12/23/2018

Integrating Moment.js with React Native

Importing the Moment library in React Native is very easy. Just import the library in the file where you need to format Date or Time.

import moment from "moment";

Now your Header must look something like this:

After calling the library in the Header section, it’s time to format the date and integrate it in the code. Create a state in the constructor method of your file and render it in the code in a way you require it to be rendered.

The following is my whole code snippet, which you can check out and see how we can use it in our code.

This is what the screen should look like now. I have used only the current Day and Date on my screen. Here is the code for that:

const today = this.state.currentDate;
const day = moment(today).format(“dddd”);
const date = moment(today).format(“MMMM D, YYYY”);

Please try other formats and keep learning! You can learn more about Moment at this GitHub repository.

Difference Between Two Dates

Usually, we come across countdown or days-left requirements, especially when we’re building a real-time application based on exams, Travel Planner, Calendar, Reservations, etc. We can easily use Moment for that as well.

To get the difference between two dates, you can use the following code. Initialize the state for any particular date, either by default or from a date picker in your application screen.