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:
/[email protected]/plugin/isBetween.js
/[email protected]/plugin/minMax.js
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./[email protected]/plugin/isBetween.js
https://unpkg./[email protected]/plugin/minMax.js
Share Improve this question asked Oct 12, 2020 at 13:47 uncooluncool 2,7037 gold badges32 silver badges57 bronze badges2 Answers
Reset to default 4Here 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./[email protected]/dayjs.min.js"></script>
<script src="https://unpkg./[email protected]/plugin/isBetween.js"></script>
<script src="https://unpkg./[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:
On the official website there is a "hidden" section with example import of plugins with browser.
https://day.js/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>