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
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()
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.
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
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
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.