Introduction:
The Moment.js team has officially declared:
"We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done."
Although Moment.js remains widely used in many existing projects, the team discourages using it for new development. Instead, they recommend alternative libraries that are better suited to modern applications. Among these, Luxon is one of the top choices.
Why Luxon?
Luxon is a powerful library for handling dates, times, time zones, and formatting, similar to Moment.js. It is particularly well-supported in newer React Native versions (>=0.70), where it works seamlessly. However, older React Native versions may lack the Intl support needed for some of Luxon's advanced functionality. If using React Native >=0.60, youโll need to configure the build flavor of JSC in your android/app/build.gradle file:
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'org.webkit:android-jsc-intl:+'
For further formatting information, refer to the Luxon documentation.
Installation:
Luxon supports Node.js 6+, and you can install it via NPM or Yarn:
npm install --save luxon
# or
yarn add luxon
Luxon Basics in React/React Native
Here are some commonly used functions in Luxon to get you started:
import { DateTime } from 'luxon';
// Current DateTime
DateTime.now()
// => DateTime 2024-10-31T16:02:34.785+05:30
// Convert to JavaScript Date object for use in date pickers
DateTime.now().toJSDate()
// => Date Thu Oct 31 2024 16:02:34 GMT+0530 (India Standard Time)
// Custom date formatting
DateTime.now().toFormat('MM/dd/yyyy')
DateTime.now().toFormat('yyyy-MM-dd h:mm a')
// Parse an ISO string
let selectedDate = '2024-10-04T16:11:47.000-05:00';
DateTime.fromISO(selectedDate, { setZone: true })
// Get start and end of the current day
DateTime.local().startOf('day')
DateTime.local().endOf('day')
// Add days to current date
DateTime.now().plus({ days: 6 })
// => DateTime 2024-11-06T16:02:34.820+05:30
// Relative difference (e.g., "3 days ago")
DateTime.fromISO(selectedDate).toRelativeCalendar()
// Format for specific day of the week
DateTime.fromISO(selectedDate, { setZone: true }).toFormat('cccc')
Custom Formatting Examples
For advanced formatting, Luxon provides versatile methods:
Calculate time difference in hours and minutes (UTC)
const timeFormatForHoursWorkedInUTC = (utcDateString) => {
const utcDate = DateTime.fromISO(utcDateString, { zone: 'utc' });
const currentDate = DateTime.utc();
const timeDifferenceMs = currentDate.diff(utcDate).as('milliseconds');
const hours = Math.floor(timeDifferenceMs / (1000 * 60 * 60));
const minutes = Math.floor((timeDifferenceMs % (1000 * 60 * 60)) / (1000 * 60));
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
};
//output: `01:30`
Some more examples:
import { DateTime } from 'luxon';
// Example ISO Date String
const exampleDate = "2024-10-31T16:11:47.000-05:00";
// 1. Short Date (e.g., "10/31/2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_SHORT));
// Output: "10/31/2024"
// 2. Medium Date (e.g., "Oct 31, 2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_MED));
// Output: "Oct 31, 2024"
// 3. Full Date (e.g., "Thursday, October 31, 2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_FULL));
// Output: "Thursday, October 31, 2024"
// 4. Huge Date (e.g., "Thursday, October 31, 2024 AD")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_HUGE));
// Output: "Thursday, October 31, 2024 AD"
// 5. Simple Time (e.g., "4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.TIME_SIMPLE));
// Output: "4:11 PM"
// 6. Short Time with Seconds (e.g., "16:11:47")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.TIME_WITH_SECONDS));
// Output: "16:11:47"
// 7. Short Date and Time (e.g., "10/31/2024, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_SHORT));
// Output: "10/31/2024, 4:11 PM"
// 8. Medium Date and Time (e.g., "Oct 31, 2024, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_MED));
// Output: "Oct 31, 2024, 4:11 PM"
// 9. Full Date and Time with Timezone (e.g., "October 31, 2024, 4:11 PM UTC-5")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_FULL));
// Output: "October 31, 2024, 4:11 PM UTC-5"
// 10. Huge Date and Time (e.g., "Thursday, October 31, 2024 AD, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_HUGE));
// Output: "Thursday, October 31, 2024 AD, 4:11 PM"
Conclusion:
Luxon offers a modern, flexible, and efficient solution for date and time handling, making it an excellent alternative to Moment.js. With its extensive timezone support, intuitive syntax, and compatibility with both Node and the browser, Luxon can cover nearly all your date-time needs in React and React Native projects.
Happy coding! ๐
Top comments (0)