Not able to customize threshold values with Relative time plugin

[devendra-morankar]

Describe the bug Not able to customize threshold values with Relative time plugin even after following steps mentioned in the documentation. Docs I tried to customize it in 2 ways and i have some observations.

1. Tried adding this code initially. But with this thresholds did not change.

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime, {
 rounding: Math.floor,
 thresholds: [
   { l: "s", r: 1 },
   { l: "ss", r: 59, d: "second" },
   { l: "m", r: 1 },
   { l: "mm", r: 59, d: "minute" },
   { l: "h", r: 1 },
   { l: "hh", r: 23, d: "hour" },
   { l: "d", r: 1 },
   { l: "dd", r: 29, d: "day" },
   { l: "M", r: 1 },
   { l: "MM", r: 11, d: "month" },
   { l: "y", r: 1 },
   { l: "yy", d: "year" }
 ]
});

2. Referred this test file https://github.com/iamkun/dayjs/blob/dev/test/plugin/relativeTime.test.js, and i found this statement delete relativeTime.$i; on line 123 which reinstalls the plugin.

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

delete relativeTime.$i;

dayjs.extend(relativeTime, {
  rounding: Math.floor,
  thresholds: [
    { l: "s", r: 1 },
    { l: "ss", r: 59, d: "second" },
    { l: "m", r: 1 },
    { l: "mm", r: 59, d: "minute" },
    { l: "h", r: 1 },
    { l: "hh", r: 23, d: "hour" },
    { l: "d", r: 1 },
    { l: "dd", r: 29, d: "day" },
    { l: "M", r: 1 },
    { l: "MM", r: 11, d: "month" },
    { l: "y", r: 1 },
    { l: "yy", d: "year" }
  ]
});

This approach works fine with .js/.jsx files but gives below error for .ts/.tsx files. Property '$i' does not exist on type 'PluginFunc<RelativeTimeOptions>'.

Expected behavior As per default behavior of dayjs("2022-06-21T10:10:10.254Z").fromNow() method default ranges it show time from 0 sec to 44 sec and after 44 sec it shows 'a min ago'. But we want to customize default behavior, so that it should show time from 0 sec to 59 sec and after 59 it should show 'a min ago'. Same for minutes, hours, days, month. This customization should work with .ts/.tsx files too. Or do we have any other solution to this issue?

Information

• Day.js Version: ^1.11.2
• OS: Windows
• Browser: Version 102.0.5005.115 (Official Build) (64-bit)
• Time zone: IST

[BePo65]

I created a little test for this and it ran without problems.

Did you omit the required dayjs.extend(updateLocale) in your code samples above by design?

[devendra-morankar]

I have added dayjs.extend(updateLocale). Please find complete code below. It's working fine with .js files but not working with .ts files. Could you please check if it is working with .ts/.tsx files.

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import updateLocale from 'dayjs/plugin/updateLocale';

delete relativeTime.$i;
dayjs.extend(relativeTime, {
  rounding: Math.floor,
  thresholds: [
    { l: "s", r: 1 },
    { l: "ss", r: 59, d: "second" },
    { l: "m", r: 1 },
    { l: "mm", r: 59, d: "minute" },
    { l: "h", r: 1 },
    { l: "hh", r: 23, d: "hour" },
    { l: "d", r: 1 },
    { l: "dd", r: 29, d: "day" },
    { l: "M", r: 1 },
    { l: "MM", r: 11, d: "month" },
    { l: "y", r: 1 },
    { l: "yy", d: "year" }
  ]
});

dayjs.extend(updateLocale);

dayjs.updateLocale('en', {
  relativeTime: {
    future: "in %s",
    past: "%s",
    s: '%d sec',
    ss: '%d sec',
    m: "1 min",
    mm: "%d min",
    h: "1 hr",
    hh: "%d hr",
    d: "1 day",
    dd: "%d days",
    M: "1 month",
    MM: "%d months",
    y: "1 year",
    yy: "%d years"
  }
})

export const customFromNow = (time) => {
    return dayjs(time).fromNow();
}

[BePo65]

I added a demo for your use case in my dayjs-with-typescript-project and it ran as expected (using npm run build && node dist/issue1961.unmodified.js).

The only difference is that I dropped the line delete relativeTime.$i; as there is no $i property on 'relativeTime' (and looking at the test in the debugger shows that there is no such property - but perhaps I only do not get the point :-).

Anyway: at least for me this looks like a solution 😄