display a firebase timestamp in relative format using moment & react - momentjs

I'm trying to display a timestamp from firebase in a relative format.
Within my firebase collection I have:
author (string): lechnerio
comment (string): Test Comment is here!
createdAt (timestamp): 22 November 2022 at 13:47:06 UTC+1
and I'd like to display the timestamp in a realtive way, e.g.: 31 minutes ago
{author} schreibt am
{moment(new Date(createdAt.nanoseconds), "YYYYMMDD").fromNow()}:
{comment}
What I'm getting back with the exact same values from above:
lechnerio schreibt am 53 years ago:
Test comment is here!
when just using new Date(createdAt) instead an invalid Date get's returned. Any suggestions on how to fix this issue. Thanks a lot in advance!

I found an answer to my issue.
{moment(createdAt.seconds * 1000).fromNow()}
In addition to the issue I was also struggling to convert english localisation to german, so "5 minutes ago" are supposed to be "vor 5 Minuten".
import moment from 'moment'
import localization from 'moment/locale/de'
moment.updateLocale("de", localization)
{moment(createdAt.seconds * 1000).fromNow()}

Related

Combine days and hours when displaying relative time

Is it possible to display the relative time using both days and hours using moment.js?
Like "2 days, 7 hours ago"
Or is there another library to do so?
Another library you have to use moment-duration-format for converting days and hours format.
So, first run this command npm install moment-duration-format
And your code look like,
import moment from 'moment';
import 'moment-duration-format';
const time = moment.duration(moment().diff('2020-11-08')).format('D [days,] H [hours ago]');
console.log(time);

Dayjs format with timezone abbreviation i.e. 'z' like in moment.js

Trying to migrate from Moment.js to Dayjs but the only thing I can't get working is the Timezone abbreviation.
dayjs('2020-07-06T14:30:00.000-04:00').tz(dayjs.tz.guess()).format('Do MMM YYYY [at] HH:MMa z')
Calling the above I would expect 6th Jul 2020 at 08:07am EDT but currently I am just getting z where EDT is.
I have added the utc and timezone plugins and can't see any other plugins needed to make this work, I notice on Dayjs format docs that z isn't listed but searching the web, I see a lot of folks saying the solution is format('', {timeZone}) but the format doesn't take a second argument??
Looks like it was added to tz-plugin: https://github.com/iamkun/dayjs/pull/325/files#diff-cad460a5e46a2a48c59e95356c683820R195
Here's a code sandbox with an example of the issue:
https://codesandbox.io/s/hungry-knuth-r58gz
--- Edit
Looks like support for tz abbr was removed :(
https://github.com/iamkun/dayjs/pull/448/commits/e64c03cea79c579bcd3c4caf235b4724e56614d4
The z formatting option is added in 1.9.0 version of dayjs: https://github.com/iamkun/dayjs/pull/1069
Update the newest version and set up the plugins correctly, which should work. Example below:
var dayjs = require("dayjs")
var utc = require("dayjs/plugin/utc")
var timezone = require("dayjs/plugin/timezone")
var advanced = requires("dayjs/plugin/advancedFormat")
dayjs.extend(timezone)
dayjs.extend(utc)
dayjs.extend(advanced)
dayjs().tz('Europe/Paris').format('DD/MM/YYYY z')

Convert into am / pm in Impala

Like in a similar query on this forum I need, but I need it to work in Impala:
In a workaround my colleague and myself attempted the following:
-- combine start date and time into a datetime
-- impala can't handle am/pm so need to look for pm indicator and add 12 hours
-- and then subtract 12 hours if it's 12:xx am or pm
================
t1.appt_time,
hours_add(
to_timestamp(concat(to_date(t1.appt_date),' ',t1.appt_time),'yyyy-MM-dd H:mm'),
12*decode(lower(strright(t1.appt_time,2)),"pm",1,0) -
12*decode(strleft(t1.appt_time,2),'12',1,0)
) as appt_datetime,
t1. ...
=========
Has anybody an easier and more elegant approach ?
Your workaround is valid, Impala does currently support AM/PM formatting for dates. There are a few open issues related
https://issues.apache.org/jira/browse/IMPALA-3381
https://issues.apache.org/jira/browse/IMPALA-5237
https://issues.apache.org/jira/browse/IMPALA-2262

Customize certain momentjs humanized duration values

Short question: I need momentjs to humanize 60 minutes into 1 hour instead of an hour. Can't figure out how to get it to work.
Long question:
Just started using momentjs, works great. We are using it to display how often a dashboard is updated.
The timers are set as a integer in minutes. We are using the humanize moment option to display 30 as 30 minutes and 360 as 6 hours etc.
This works great but not in 2 cases. 60 gets humanized to an hour. We need it to be 1 hour. And 1440 is displayed as a day, instead of 1 day.
We need this change because the column is answering the question "How often does your metric update?"
The answer is "every 1 hour". "every an hour" doesn't quite work.
I read through the docs and googled, but couldn't find a way to customize just a few humanized display formats.
We are already setting true as the second parameter to get just the value without the suffix from this question and answer - How to Customize Humanized Moment js Date Result
But the value comes back as 'an hour' instead of '1 hour'.
You can use updateLocale method documented in the Customize -> Relative time section of the docs. This will affect output of from, fromNow, to, toNow and humanize.
In your case you can simply update h and d keys of the relativeTime object.
Here a working sample:
moment.updateLocale('en', {
relativeTime : {
h: "1 hour",
d: "1 day",
}
});
var d1 = moment.duration(60, 'm');
var d2 = moment.duration(1440, 'm');
console.log(d1.humanize());
console.log(d2.humanize());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
You can find further examples of relative time customization here and here.
you can use the methods like minutes(), months(), years() available on the duration object and then you can create your own string. the humanize() method gives an approximate value against the duration and not the exact duration.

Momentjs Locale - Day of Week Config for US

I'm using Momentjs in several places in an App I'm working on, and it is working fine. However, I am using endOf('week') and it is resulting in Saturdays. What I am expecting is Sundays.
I've been trying to find information about it, but it is not standing out anywhere how to get around it without changing code everywhere it is used. From my digging around, Moment automatically applies locales. And from looking in one of the locale files, I can see where this day of week (dow) is configured.
Example: moment/locale/en-gb.js
week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // The week that contains Jan 4th is the first week of the year.
}
So what I gather is if I were in GB, end of week would be Sundays. But what I'm not clear on, is where are the defaults for U.S.? There is no en-US.js in the locale directory and it seems to default to dow:0
What I'm trying to determine is:
Is there a reason there's no en-US?
Is my best solution to just copy the en-gb.js as en-US.js? If I do that and include it in my App, will this affect others in other locales?
I did tinker in moment.min.js and changed dow from 0 to 1, and that resulted in Sundays being the end of week throughout the App. But that's not something I want to do.
Hopefully this is not just me missing the answers somewhere.
Any suggestions are welcome.
Thank you.
Update 1
Using:
momentjs 2.9.0
angular-moment 0.10.3
The week system in moment is not the easiest thing to understand. That said, the default 'en' is kind of understood to be the same as 'en-us'. If you want to update day of week to be Sunday, you can use locale customization. Ensure that you are using version 2.12 or greater, as that is when the updateLocale feature was introduced. Then simply run:
moment.updateLocale('en', {week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // The week that contains Jan 4th is the first week of the year.
}});
This results in:
moment().endOf('week').format()
"2016-07-03T23:59:59-05:00"
If you are using 2.8 to 2.11, the syntax is simply:
moment.locale('en', {week : {
dow : 1, // Monday is the first day of the week.
doy : 4 // The week that contains Jan 4th is the first week of the year.
}});
So, not terribly different, but a bit ambiguous.

Resources