Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Displaying time relative to a given using luxon library

Tags:

luxon

Does luxon support feature for Displaying time relative to a given?

Moment has "Calendar time" feature:

https://momentjs.com/docs/#/displaying/calendar-time/

moment().calendar(null, {
   sameDay: '[Today]',
   nextDay: '[Tomorrow]',
   nextWeek: 'dddd',
   lastDay: '[Yesterday]',
   lastWeek: '[Last] dddd',
   sameElse: 'DD/MM/YYYY'
});

Could I achieve same using luxon?

like image 866
ilyabasiuk Avatar asked Dec 10 '18 21:12

ilyabasiuk


People also ask

What is Luxon DateTime?

Luxon is a library for dealing with dates and times in JavaScript. DateTime.

Should I use moment or Luxon?

Moment. js is much nicer than native Dates, but there's still room for improvement. Luxon is a modern Javascript date/time library built by one of the Moment. js developers to address some shortcomings in the old standby for date manipulation.

What is fromJSDate?

▸ fromJSDate(date, options) Create a DateTime from a JavaScript Date object. Uses the default zone.

What is Luxon NPM?

Luxon is a library for working with dates and times in JavaScript.

What is the Luxon library?

Luxon is a powerful, modern, and friendly wrapper for JavaScript dates and times. Indeed, this library solves most of the common problems related to Date handling: and More... The most important part of the Luxon library is the DateTime object.

How to get the zone of a Luxon DateTime object?

The Luxon library provides an interface to get the details related to the zone of a particular DateTime object. To use it, you need to import Zone from the Luxon library. Let's try to use Zone on a Luxon DateTime object.

How to display local time on the web page using Luxon?

Import DateTime from the Luxon library. Inside the LuxdateComponent, define a variable called localDatetime. Set the value of the localDatetime variable as shown: Render the localDatetime variable in the luxdate.component.html file. Save the changes and you will have the local time displayed on the web page.

What is the difference between moment and Luxon?

Luxon is considered an evolution of Moment.js - a very popular library for date handling in the JavaScript ecosystem. Luxon is a powerful, modern, and friendly wrapper for JavaScript dates and times. Indeed, this library solves most of the common problems related to Date handling: and More...


Video Answer


1 Answers

From version 1.9.0 you can use toRelativeCalendar:

Returns a string representation this date relative to today, such as "yesterday" or "next month" platform supports Intl.RelativeDateFormat.

const DateTime = luxon.DateTime;

const now = DateTime.local();
// Some test values
[ now,
  now.plus({days: 1}),
  now.plus({days: 4}),
  now.minus({days: 1}),
  now.minus({days: 4}),
  now.minus({days: 20}),
].forEach((k) => {
  console.log( k.toRelativeCalendar() );
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.js"></script>

Before version 1.9.0, there was no calendar() equivalent in Luxon.

The For Moment users manual page stated in the DateTime method equivalence => Output => Humanization section:

Luxon doesn't support these, and won't until the Relative Time Format proposal lands in browsers.

Operation       | Moment     | Luxon
---------------------------------------------------------------------------------------
"Calendar time" | calendar() | None (before 1.9.0) / toRelativeCalendar() (after 1.9.0)

If you need, you can write something by yourself, here a custom function example that has a similar output of moment's calendar():

const DateTime = luxon.DateTime;

function getCalendarFormat(myDateTime, now) {
  var diff = myDateTime.diff(now.startOf("day"), 'days').as('days');
  return diff < -6 ? 'sameElse' :
    diff < -1 ? 'lastWeek' :
    diff < 0 ? 'lastDay' :
    diff < 1 ? 'sameDay' :
    diff < 2 ? 'nextDay' :
    diff < 7 ? 'nextWeek' : 'sameElse';
}

function myCalendar(dt1, dt2, obj){
  const format = getCalendarFormat(dt1, dt2) || 'sameElse';
  return dt1.toFormat(obj[format]);
}

const now = DateTime.local();
const fmtObj = {
   sameDay: "'Today'",
   nextDay: "'Tomorrow'",
   nextWeek: 'EEEE',
   lastDay: "'Yesterday'",
   lastWeek: "'Last' EEEE",
   sameElse: 'dd/MM/yyyy'
};

// Some test values
[ now,
  now.plus({days: 1}),
  now.plus({days: 4}),
  now.minus({days: 1}),
  now.minus({days: 4}),
  now.minus({days: 20}),
].forEach((k) => {
  console.log( myCalendar(now, k, fmtObj) );
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.js"></script>

This code roughly inspired from moment code, it can be definitely improved.

like image 165
VincenzoC Avatar answered Oct 23 '22 22:10

VincenzoC