Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Howto integrate this in a website? #574

Open
hdijkema opened this issue Nov 15, 2023 · 1 comment
Open

Howto integrate this in a website? #574

hdijkema opened this issue Nov 15, 2023 · 1 comment

Comments

@hdijkema
Copy link

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
Copy link
Author

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()),
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant