How to load day.js plugin in browser

Question

How to load day.js plugin in browser

3k Views Asked by uncool At 18 April 2025 at 09:16

I'm trying to load two day.js plugins on the client-side. But it doesn't seem to be working... what am I doing wrong?

Pug / Jade file

script(defer, src='javascript/external/day.js')
script(defer, src='javascript/external/day_minmax.js')
script(defer, src='javascript/external/day_isbetween.js')

script(defer, dayjs.extend(window.dayjs_plugin_minmax))
script(defer, dayjs.extend(window.dayjs_plugin_isbetween))

console output

dayjs.max()
Uncaught TypeError: dayjs.max is not a function

The loaded js plugin files are from:

https://unpkg.com/[email protected]/plugin/isBetween.js

https://unpkg.com/[email protected]/plugin/minMax.js

Original Q&A

There are 2 best solutions below

pink_daemon On 13 December 2021 at 13:41

On the official website there is a "hidden" section with example import of plugins with browser.

https://day.js.org/docs/en/plugin/loading-into-browser

Worked for me like as they say:

<script src="path/to/dayjs/plugin/advancedFormat"></script>
<!-- Load plugin as window.dayjs_plugin_NAME -->
<script>
  dayjs.extend(window.dayjs_plugin_advancedFormat)
</script>

**Paul Şular** · Accepted Answer

Here is a working example inside a index.html file, you could do the same inside your root Pug/Jade file. Also i'm using cdn version, but you could also import them from your folder where you downloaded them.

window.dayjs_plugin_minmax vs window.dayjs_plugin_minMax might the problem

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
    <script src="https://unpkg.com/[email protected]/plugin/isBetween.js"></script>
    <script src="https://unpkg.com/[email protected]/plugin/minMax.js"></script>
  </head>
  <body></body>
  <script>
    const minMax = window.dayjs_plugin_minMax;
    const isBetween = window.dayjs_plugin_isBetween;
    dayjs.extend(minMax);
    dayjs.extend(isBetween);
    console.log(
      "MAX: ",
      dayjs.max(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
    );
    console.log(
      "MIN: ",
      dayjs.min(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
    );
    console.log(
      "BETWEEN: ",
      dayjs("2016-10-30").isBetween("2016-01-01", "2016-10-30", null, "[)")
    );
  </script>
</html>

And this is the result:

How to load day.js plugin in browser

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DAYJS

Trending Questions

Popular # Hahtags

Popular Questions