iamkun / iamkun/dayjs

Not able to customize threshold values with Relative time plugin

Open
#1,961 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.