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

0 replies

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I run without NPM? #621

{{title}}

Replies: 5 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

How do I run without NPM? #621

festing Jun 18, 2024

Replies: 5 comments · 3 replies

il97mur Jun 19, 2024

festing Jun 19, 2024 Author

il97mur Jun 19, 2024

festing Jun 19, 2024 Author

Pathologic Jul 9, 2024

lewysigns Jul 24, 2024

lewysigns Jul 25, 2024

MagnusOxlund Sep 21, 2024

festing
Jun 18, 2024

Replies: 5 comments 3 replies

il97mur
Jun 19, 2024

festing
Jun 19, 2024
Author

il97mur
Jun 19, 2024

festing
Jun 19, 2024
Author

Pathologic
Jul 9, 2024