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

Checked! Task Pro for Android

SMART task system that combine the best of task management methodologies Natively Built for Android! The best Task, Note, and Calendar Master from BlackBerry is now available on Android! Please scroll to near bottom to see information on the Smart Task system - most efficient approach to manage your tasks and projects. Android Store link ------------------------------------------------- Instructions: Checked! Task Pro Instruction ------------------------------------------------- Current features: Use Speech to text icon to automatically add new task and calendar entry: e.g. Meet John tomorrow (use keyword similar to Smart Add feature below). Smart Add featuring category and natural language parsing for extremely fast event creation: Dr appointment on Dec 1, 2016 at 5pm Pick up airport tomorrow Meet John next Monday at 5PM Email Shawn tomorrow @Tax Finish tax in 5 days // Tax is a category Superb fluid user interface. Ultimate task and project management application SMART task system -

New Site

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

Bartender Cocktails and Drink 30,000+ for BlackBerry 10

Calling all cocktails & drinks lovers! This is the most wanted intelligent Cocktails & Drinks recipe application. It contains 30,000+ easy-to-follow cocktails and drinks with photo capability. No internet/Wifi connection required! You can also search any drink recipes easily, or even add your own invented cocktails and drinks!