dayjs
dayjs copied to clipboard
iamkun
Dayjs: r.ordinal is not a function at advanceFormat.js
Describe the bug When I try to format the date to show ordinal for date it breaks the app and shows error r.ordinal is not a function. Code: import dayjs from 'dayjs'; import advancedFormat from 'dayjs/plugin/advancedFormat'; dayjs.extend(advancedFormat); const formattedDate = dayjs(endDate).format("MMMM Do, YYYY");
Expected behavior It should format date in this format => December 31st, 2022
Information
- Day.js Version [1.10.7]
- OS: [iOS]
- Browser [chrome [100.0.4896.127]]
I didn't try the code in Chrome, but only on my node.js system. At least in your code above there is a typo in the second line:
import advancedFormat from 'dayjs/plugin/advanceFormat';
should be import advancedFormat from 'dayjs/plugin/advancedFormat'; (you see the 'd' before the 'Format'?)
Perhaps this was the culprit - otherwise I will have to test it on chrome ;-)
@BePo65 In actual implementation I used import advancedFormat from 'dayjs/plugin/advancedFormat' only but while posting I typed it wrong. I've updated it though.
Tested the following code in chrome (v102.0) and Firefox (v101.0) and got this result:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>dayjs issue 1891</title>
</head>
<body>
<h1 id="header">dayjs issue 1891</h1>
<p id="result">waiting...</p>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugin/advancedFormat.js"></script>
<script>
dayjs.extend(window.dayjs_plugin_advancedFormat)
const endDate = '2022-12-31'
const formattedDate = dayjs(endDate).format("MMMM Do, YYYY");
document.getElementById("result").innerHTML = formattedDate;
console.log(formattedDate)
</script>
</body>
</html>
@BePo65 In your implementation, it seems to work fine but I used it in React application, not sure if that affects the working. But I still see that error.
HM, perhaps a type definition thing. Do you have a small demo e.g. in CodeSandbox or something like this?
Perhaps @Kashish-Chaudhary could create a demo of the problem in a sandbox react playground?
I tested it with plain typescript (in my repo dayjs-typescript-demo calling npm run start:issue1891) and got no error.
HM, perhaps a type definition thing. Do you have a small demo e.g. in CodeSandbox or something like this?
@BePo65 FYI, here is a code to reproduce the issue.
You can reproduce this when you change the locale globally. It also happens only if you set 'en' as the locale. I tried using 'nn', 'nb', 'de' locales and the code work fine for those but not for 'en'.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>dayjs issue 1891</title>
</head>
<body>
<h1 id="header">dayjs issue 1891</h1>
<p id="result">waiting...</p>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/[email protected]/locale/en"></script>
<script>
var customLocale = window.dayjs_locale_en; // this happens only when 'en' is used as the locale
dayjs.locale({...customLocale})
dayjs.extend(window.dayjs_plugin_advancedFormat)
const endDate = '2022-12-31'
const formattedDate = dayjs(endDate).format("MMMM Do, YYYY");
document.getElementById("result").innerHTML = formattedDate;
console.log(formattedDate)
</script>
</body>
</html>
I can reproduce the effect with your code. The problem is the way you activate the locale.
I didn't completely find out, why the dayjs.locale({...customLocale}) works in node but not in the browser. In node it adds the ordinal function to the used locale data, in the browser it does not.
But anyway this is not the recommended way to activate a locale. IMHO the code should look like this (works on my system):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>dayjs issue 1891</title>
</head>
<body>
<h1 id="header">dayjs issue 1891</h1>
<p id="result-de">waiting...</p>
<p id="result-iso">waiting...</p>
<p id="result-en">waiting...</p>
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/[email protected]/locale/de"></script>
<script src="https://unpkg.com/[email protected]/locale/en"></script>
<script>
dayjs.extend(window.dayjs_plugin_advancedFormat)
const endDate = '2022-12-31'
dayjs.locale('de');
const formattedDateDe = dayjs(endDate).format("MMMM Do, YYYY");
console.log(formattedDateDe)
document.getElementById("result-de").innerHTML = formattedDateDe;
const formattedDateIso = dayjs(endDate).format("MMM D YYYY");
console.log(formattedDateIso)
document.getElementById("result-iso").innerHTML = formattedDateIso;
dayjs.locale('en');
const formattedDateDo = dayjs(endDate).format("MMMM Do, YYYY");
console.log(formattedDateDo)
document.getElementById("result-en").innerHTML = formattedDateDo;
</script>
</body>
</html>
Perhaps this helps you solve your issue :-)
//dayjs has an error where if you need to use the 'Do' date format,
//there's a bug where some of locales in dayjs do not provide an ordinal,
//so we can manually fix it by using the updateLocalePlugin and providing the ordinal:
dayjs.updateLocale('en', {
...
ordinal: (n) => {
const s = ['th', 'st', 'nd', 'rd'];
const v = n % 100;
return `[${n}${(s[(v - 20) % 10] || s[v] || s[0])}]`;
....
});
I checked all locale files in the dev branch of dayjs and all contain a 'ordinal' function besides 'en' that gets a 'ordinal' function by the 'AdvancedFormat' plugin.
Did I miss a locale?
IMHO the 'ordinal' function of 'en' should be part of the core dayjs file and not of the 'AdvancedFormat' plugin.