Not able to customize threshold values with Relative time plugin
- Dominant language
- JavaScript
- Stars
- 48.7k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
Not able to customize threshold values with Relative time plugin even after following steps mentioned in the documentation. [Docs](https://day.js.org/docs/en/customization/relative-time)
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'.`
**Expected behavior**
As per default behavior of `dayjs("2022-06-21T10:10:10.254Z").fromNow()` method [default ranges](https://day.js.org/docs/en/display/from-now) 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
Contributor guide
Research direction
Start with the relativeTime plugin entry point and test/plugin/relativeTime.test.js, then compare the documented threshold configuration with the TypeScript type exposed for the plugin. Done means custom thresholds work in both JavaScript and TypeScript/TSX without the reported $i type error, with tests covering the expected ranges.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- api
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100