3.7 KiB
CDN
Starting with v3.6.0, the CDN versions of date-fns are available on jsDelivr and other CDNs. They expose the date-fns functionality via the window.dateFns
global variable.
Unlike the npm package, the CDN is transpiled to be compatible with IE11, so it supports a wide variety of legacy browsers and environments.
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/ru/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date());
//=> "last Friday at 7:26 p.m."
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.ru,
});
//=> "в прошлую пятницу в 19:26"
</script>
The CDN versions are available for the main module, all & individual locales, and the FP submodule.
They come in two flavors: cdn.js
and cdn.min.js
. The latter is minified and should be used in production. The former is useful for debugging and development.
Keep in mind that using the CDN versions in production is suboptimal because they bundle all the date-fns functionality you will never use. It's much better to use the npm package and a tree-shaking-enabled bundler like webpack or Rollup. However, the CDN versions are helpful for quick prototyping, small projects, educational purposes, or working in a legacy environment.
Main module
The main module with all functions bundled:
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.min.js
You can access it via the dateFns
global variable:
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script>
dateFns.addDays(new Date(2014, 1, 11), 10);
//=> Tue Feb 21 2014 00:00:00
</script>
The FP submodule
The FP submodule with all functions bundled:
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.min.js
You can access it via the dateFns.fp
global variable:
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/fp/cdn.min.js"></script>
<script>
dateFns.fp.addDays(10, new Date(2014, 1, 11));
//=> Tue Feb 21 2014 00:00:00
</script>
Locales
All locales bundled:
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.min.js
You can access them via the dateFns.locale
global variable:
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
</script>
The locales are also available as individual files.
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.min.js
You can access them via the dateFns.locale.LOCALE
global variable:
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script>
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
locale: dateFns.locale.es,
});
//=> "el viernes pasado a las 19:26"
</script>