Dayjs: r.ordinal is not a function at advanceFormat.js #1891

Kashish-Chaudhary · 2022-05-09T22:45:27Z

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]]

Kashish-Chaudhary · 2022-05-10T00:13:25Z

@iamkun ^^

tziyang-lum · 2022-05-11T10:08:48Z

'Do' format seems broken. Getting the same error as above

Kashish-Chaudhary · 2022-05-13T00:22:08Z

That's correct as when we remove 'Do' in format error goes away.

BePo65 · 2022-06-06T13:44:06Z

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 ;-)

Kashish-Chaudhary · 2022-06-10T15:09:37Z

@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.

BePo65 · 2022-06-10T16:04:36Z

So I will have to test it on Chrome - will be back soon 😄

BePo65 · 2022-06-11T04:59:08Z

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/dayjs@1.11.3/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/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>

Kashish-Chaudhary · 2022-06-13T14:11:57Z

@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.

BePo65 · 2022-06-26T08:27:29Z

HM, perhaps a type definition thing. Do you have a small demo e.g. in CodeSandbox or something like this?

uaday · 2022-07-05T12:51:10Z

Same problem
'Do' format seems broken. Getting the same error as above

Bykiev · 2022-07-14T07:45:28Z

Can anybody try to fork and modify this demo to reproduce the issue? I can't reproduce this too.

BePo65 · 2022-07-14T17:29:50Z

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.

csath · 2022-08-31T04:49:23Z

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/dayjs@1.11.3/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/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>

BePo65 · 2022-09-01T16:34:41Z

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/dayjs@1.11.3/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/locale/de"></script>
  <script src="https://unpkg.com/dayjs@1.11.3/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 :-)

bjois · 2022-09-09T21:33:49Z

//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])}]`;
    ....
});

BePo65 · 2022-09-25T05:33:26Z

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.

Bykiev mentioned this issue Jul 14, 2022

dayjs().format('Do') has an error #1978

Closed

BePo65 mentioned this issue Sep 26, 2022

refactor: move declaration for english 'ordinal' to 'en' locale file #2071

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dayjs: r.ordinal is not a function at advanceFormat.js #1891

Dayjs: r.ordinal is not a function at advanceFormat.js #1891

Kashish-Chaudhary commented May 9, 2022 •

edited

Loading

Kashish-Chaudhary commented May 10, 2022 •

edited

Loading

tziyang-lum commented May 11, 2022

Kashish-Chaudhary commented May 13, 2022

BePo65 commented Jun 6, 2022

Kashish-Chaudhary commented Jun 10, 2022

BePo65 commented Jun 10, 2022

BePo65 commented Jun 11, 2022 •

edited

Loading

Kashish-Chaudhary commented Jun 13, 2022

BePo65 commented Jun 26, 2022

uaday commented Jul 5, 2022

Bykiev commented Jul 14, 2022

BePo65 commented Jul 14, 2022

csath commented Aug 31, 2022

BePo65 commented Sep 1, 2022

bjois commented Sep 9, 2022

BePo65 commented Sep 25, 2022 •

edited

Loading

Dayjs: r.ordinal is not a function at advanceFormat.js #1891

Dayjs: r.ordinal is not a function at advanceFormat.js #1891

Comments

Kashish-Chaudhary commented May 9, 2022 • edited Loading

Kashish-Chaudhary commented May 10, 2022 • edited Loading

tziyang-lum commented May 11, 2022

Kashish-Chaudhary commented May 13, 2022

BePo65 commented Jun 6, 2022

Kashish-Chaudhary commented Jun 10, 2022

BePo65 commented Jun 10, 2022

BePo65 commented Jun 11, 2022 • edited Loading

Kashish-Chaudhary commented Jun 13, 2022

BePo65 commented Jun 26, 2022

uaday commented Jul 5, 2022

Bykiev commented Jul 14, 2022

BePo65 commented Jul 14, 2022

csath commented Aug 31, 2022

BePo65 commented Sep 1, 2022

bjois commented Sep 9, 2022

BePo65 commented Sep 25, 2022 • edited Loading

Kashish-Chaudhary commented May 9, 2022 •

edited

Loading

Kashish-Chaudhary commented May 10, 2022 •

edited

Loading

BePo65 commented Jun 11, 2022 •

edited

Loading

BePo65 commented Sep 25, 2022 •

edited

Loading