How do I run without NPM? #621

festing · 2024-06-18T17:57:54Z

festing
Jun 18, 2024

on shared server, no access to install via NPM. Downloaded src files. How do I use?

il97mur · 2024-06-19T03:45:45Z

il97mur
Jun 19, 2024

Hi @festing , perhaps you can try using the files from CDN:
https://www.jsdelivr.com/package/npm/air-datepicker

0 replies

festing · 2024-06-19T13:03:22Z

festing
Jun 19, 2024
Author

Great. that works... NOW how do I change language to english? Documentation method does not work as it seems it's refering to NPM install object. I can get other options to work but NOTHING I try changes to english.

0 replies

il97mur · 2024-06-19T15:57:50Z

il97mur
Jun 19, 2024

@festing You can create an locale object before datepicker initialization and use it.
For example:

<script>
        const input = document.querySelector('.datepicker');

        const localeObj = {
            days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
            monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            today: 'Today',
            clear: 'Clear',
            dateFormat: 'mm/dd/yyyy',
            timeFormat: 'hh:ii aa',
            firstDay: 0
        };

        const datepicker = new AirDatepicker(input, {
            locale: localeObj,
        });
</script>

The locale object is a copy from here: https://github.com/t1m0n/air-datepicker/blob/v3/dist/locale/en.js

1 reply

trymeouteh Feb 14, 2025

Thank you for this.

I do hope there is a UMD build in the future of Air Datepicker to not need to manually create the locale translations.

festing · 2024-06-19T17:27:50Z

festing
Jun 19, 2024
Author

Hmmm... seems like there should be a way to somehow link to the existing language JS in script, rather than having to open and then copy/paste.

0 replies

Pathologic · 2024-07-09T09:11:04Z

Pathologic
Jul 9, 2024

@festing

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/t1m0n/air-datepicker@v3/dist/air-datepicker.css">
</head>
<body>

<input id="air_datepicker" type="text">

<script>
    var exports = {
      default: {}
    }
</script>

<script src="https://cdn.jsdelivr.net/gh/t1m0n/air-datepicker@v3/dist/air-datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/gh/t1m0n/air-datepicker@v3/dist/locale/bg.js"></script>
<script>
  new exports.AirDatepicker('#air_datepicker', {
    locale: exports.default
  })
</script>
</body>
</html>

3 replies

lewysigns Jul 24, 2024

Thank you Pathologic!

Could you please explain why the following portion is necessary? (I'd just like to understand before I implement)

<script>
    var exports = {
      default: {}
    }
</script>

lewysigns Jul 25, 2024

Had a discussion in gpt to answer my own question:

"The exports object is initially defined in the HTML file. When the external scripts are loaded and executed, they attach the AirDatepicker function and locale settings to the exports object, which allows the final script to initialize the datepicker with the correct settings."

Looking at the code it looks like this is correct. Thank you @Pathologic , did you learn this via documentation or reading through the code? (Only ask because I'd like to read the documentation if it exist)

MagnusOxlund Sep 21, 2024

@lewysigns I've brought the topic up again in the existing issue #440.

jpgateaux · 2025-02-20T16:46:57Z

jpgateaux
Feb 20, 2025

Rewrote local files and placed them in locales directory
locales.zip

in en.js

"use strict";


locales.en = void 0;
var _default = {
  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  today: 'Today',
  clear: 'Clear',
  dateFormat: 'MM/dd/yyyy',
  timeFormat: 'hh:mm aa',
  firstDay: 0
};
locales.en = _default;

in html

<script>
    var locales = {};
</script>
<script src="./air-datepicker/locales/en.js"></script>//one for each locale on page

in js

new AirDatepicker('#air_datepicker', {
    locale: locales.en
  })

this way you can have different locales on same page without copy and paste

0 replies

How do I run without NPM? #621

Uh oh!

Replies: 6 comments · 4 replies

Uh oh!

Uh oh!

Uh oh!

festing Jun 19, 2024 Author

Uh oh!

Uh oh!

Uh oh!

festing Jun 19, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

in en.js

in html

in js

Replies: 6 comments 4 replies

festing
Jun 19, 2024
Author

festing
Jun 19, 2024
Author