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?
Luxon is a library for dealing with dates and times in JavaScript. DateTime.
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.
▸ fromJSDate(date, options) Create a DateTime from a JavaScript Date object. Uses the default zone.
Luxon is a library for working with dates and times in JavaScript.
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.
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.
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.
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...
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With