Skip to main content

React Native + Javascript Date Time manipulation: moment and date-fns libraries

 There are multiple method to format and manipulate Date and Time. Generally speaking the most common libraries used to manipulate dates are Day.js, Luxon, Moment, and Date-fns.

Moment developers have discouraged developers to use moments at this time due to not being built for modern JavaScript era.

Day.js

Installation:

npm install dayjs --save

Header import:

import calendar from 'dayjs/plugin/calendar'
import dayjs from "dayjs";

Usage example:

dayjs.extend(calendar) dayjs().calendar(dayjs('2008-01-01')) dayjs().calendar(null, { sameDay: '[Today at] h:mm A', // The same day ( Today at 2:30 AM ) nextDay: '[Tomorrow at] h:mm A', // The next day ( Tomorrow at 2:30 AM ) nextWeek: 'dddd [at] h:mm A', // The next week ( Sunday at 2:30 AM ) lastDay: '[Yesterday at] h:mm A', // The day before ( Yesterday at 2:30 AM ) lastWeek: '[Last] dddd [at] h:mm A', // Last week ( Last Monday at 2:30 AM ) sameElse: 'DD/MM/YYYY' // Everything else ( 17/10/2011 ) })

Additional links: https://day.js.org/docs/en/plugin/calendar

Formats

https://day.js.org/docs/en/display/format

Luxon usage

npm install --save luxon

Luxon has great date time support. However, relative calendar outputs will change to in x days format - which I don't like.

 DateTime.fromJSDate(date).toRelativeCalendar();

Moment usage

import moment from "moment";

And to use the moment library, use the method below (note the bolded text). In the example below, I use calendar function to get the relative date to output on my application.

let formattedDate = moment(date).calendar(null, {

            sameDay: '[Today]',

            nextDay: '[Tomorrow]',

            nextWeek: 'dddd',

            lastDay: '[Yesterday]',

            lastWeek: '[Last] dddd',

            sameElse: ' '

        });

Further examples: https://betterprogramming.pub/using-moment-js-in-react-native-d1b6ebe226d4

Date-fns

This date-fns library is a lot lighter to use since you can import a specific function instead of the entire large library. However, it doesn't have certain customized option to allow manipulation of the relative date output similar to above.

Import the function to use similar to below:

import { format, formatRelative } from "date-fns";

To use in the code, you call the simple format date function similar to below:

format(date, "MMM d, yyyy");

Comments

Popular posts from this blog

New Site

Testing the new site! The focus will be on Project Portfolio Management and Software Development. Hope everyone's having a great day!

Checked Task Pro Instruction (BlackBerry 10)

  Checked Instruction I just started working on this page, please send me comments and suggestions that could improve this site. Please note that if you use the Android app, the instruction is similar to the BlackBerry app below. I will create a separate instruction page for Android app soon. Contents 1  Initial Set-up after Installation 2  SMART task system that combine the best of GTD (Getting Things Done) and MYN  3  Smart Add - natural language date parser 4  ***NEW*** Shortcuts 5  Back-up and Restore - How to Transfer data from one device to another 6  BES - Work Space - Add a public app from the BlackBerry World storefront 7  Settings options that will definitely increase your productivity 8  Automatically add email as task 9  Tips on improving performance 10  Add a category 11  Delete a category 12  Keep categories permanently 13  Add sub-task 14  Automatic Synchronize from remember 15  Sort options 16  How to add recurrent task and edit advance calendar detail 17  Outlook.com a

React Native + Javascript + Date Time + JSON.Stringify() + JSON.parse()

This page will capture all issues related to Date and React Native mobile app development. Will add more as I go through the development cycle.  I will play around with Javascript for a bit before switching to TypeScript.  Some of the information below might not be following the best practice as I just started the development process. Will update as I learn more about React Native + Javascript. Storing Date object in AsyncStorage You can store Date object directly into AsyncStorage. Generally in other programming language, you can store the Date object directly in a data storage. However, with React Native, you will get the the Debug Console warning on Expo Go if you do so. I recommend using JSON.stringify() command below to store the date object. Please follow the instruction below.  On the side note, you can also store millisecond and use the date toString option but it is not recommended. I would recommend using stringify command as it will store using the toISOString() which is the