Howto integrate this in a website?

[hdijkema]

I'm following the instructions provided, but I get one error after another:

import AirDatepicker from 'air-datepicker'

gives:

Uncaught TypeError: Failed to resolve module specifier "air-datepicker". 
Relative references must start with either "/", "./", or "../".

import AirDatepicker from '/lib/air-datepicker/air-datepicker.js'

gives:

Uncaught SyntaxError: The requested module '/lib/air-datepicker/air-datepicker.js' 
does not provide an export named 'default'

<script type="text/javascript" src="/lib/air-datepicker/air-datepicker.js"></script>
<script type="module">
    import AirDatepicker from 'air-datepicker';
</script>

gives:

Uncaught TypeError: Failed to resolve module specifier "air-datepicker". 
Relative references must start with either "/", "./", or "../".

When I just include the air-datepicker with the script tag,

<script type="text/javascript" src="/lib/air-datepicker/air-datepicker.js"></script>

and later on I just instantiate a datepicker

  var v = new AirDatepicker('#id');

it works.

However, when I try to import locales...

<script type="text/javascript" src="/lib/air-datepicker/air-datepicker.js"></script>
<script type="text/javascript" src="/lib/air-datepicker/locale/en.js"></script>

I get:

Uncaught ReferenceError: exports is not defined  at en.js:3:23

When I add this:

<script type="text/javascript" src="/lib/air-datepicker/air-datepicker.js"></script>
<script type="text/javascript">var exports = {};</script>
<script type="text/javascript" src="/lib/air-datepicker/locale/en.js"></script>

Lateron, I get an error:

widgets.js:1536  Uncaught ReferenceError: localeEn is not defined

Please explain what I should do to integrate air-datepicker in a simple standard javascript/html app. The provided documentation is somehow not enough for me to get going.

[hdijkema]

I managed to create modules from the distribution using a perl script to create the necessary exports to access the modules:

#!/usr/bin/perl

my $home=$ENV{'HOME'};
my $MYDIR="$home/website/lib";

my @files=glob('locale/*.js');

open my $fo, ">$MYDIR/air-datepicker-locales.js";
print $fo "var air_datepicker_locales = {\n";
while(my $file = shift @files) {

   $var = $file;
   $var =~ s/locale.([^.]+).*/$1/;
   $var =~ s/[-]/_/g;

   print $fo "$var: ";
   open my $fh, "<$file";
   $locales = 0;
   while(my $line = <$fh>) {
      if ($locales eq 1) {
         if ($line=~/}[;]/) { $line=~s/[;]/,/; }
         print $fo "$line";
      }

      if ($line=~/var\s+_default/) {
         $locales = 1;
         $line=~s/var\s+_default[^{]+//;
         print $fo "$line";
      } elsif ($line=~/}[,]/) {
         $locales = 0;
      }
   }
   close $fh;
}

print $fo "};\n";
print $fo "class AirDatepickerLocale\n";
print $fo "{\n";
print $fo "  static get(lang) { if (air_datepicker_locales[lang] === undefined) { return this.get('en'); } else { return air_datepicker_locales[lang]; } }\n";
print $fo "}\n";
print $fo "export { AirDatepickerLocale };\n";
close $fo;

open my $fh, "<air-datepicker.js";
open my $fo, ">$MYDIR/air-datepicker.js";

print $fo "var exports = {};\n";

while(my $line = <$fh>) {
   print $fo $line;
}

print $fo "function airDatepicker(elem, options = {}) { return new AirDatepicker(elem, options); }\n";
print $fo "var AirDatepicker = exports.AirDatepicker;\n";
print $fo "\nexport { AirDatepicker  };\n";

close $fh;
close $fo;

Now I can use the locales and the AirDatepicker as a module import in my javascript:

import { AirDatepicker } from '../lib/air-datepicker.js';
import { AirDatepickerLocale } from '../lib/air-datepicker-locales.js';

(...)

this._pickr = new AirDatepicker('#' + id, {
    locale: AirDatepickerLocale.get(language()),
});