0

Problem: I have jQuery datepicker in react app, which has to be localised in different languages(30 lang). I downloaded all the i18n file from the link (https://github.com/jquery/jquery-ui/tree/master/ui/i18n) but it has to be included as <script> tag.

Question: Is there a way to import this file? using webpackand commonjs?. I am using es6 import. Is there a way to bundle them all and import in the on file?

any suggestions are appreciated.

GeekOnGadgets
  • 941
  • 3
  • 14
  • 47
  • are you using the webapp in your website? I have answered your question thinking that you are using it for a website. If your problem is different. Let me know so I will edit the answer accordingly – Naeem Ul Wahhab Aug 31 '16 at 04:10
  • sorry, looks like you miss understood my question, i know it can be included as `script`tag, but including 30 of this files is bit too much. So it there a way to bundle on the client side? – GeekOnGadgets Aug 31 '16 at 04:15
  • Ok I am editing the answer according to your requirement . wait – Naeem Ul Wahhab Aug 31 '16 at 04:20
  • Take a look at answer now. I also recommend GRUNTJS which is designed for the same purpose. Let me know if you need further help. – Naeem Ul Wahhab Aug 31 '16 at 04:39

2 Answers2

0

Edit: Yes there's a way:

You can create a javascript function that takes the path as a parameter and creates these HTML lines:

<script src="js/datepicker-in-all-languages/datepicker-af.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar-DZ.js"></script>
<script src="js/datepicker-in-all-languages/datepicker-ar.js"></script>

...................and for all other 30 languages................

And you'll just have to call this:

loadLib("datepicker-in-all-languages/datepicker-af");
loadLib("datepicker-in-all-languages/datepicker-ar-DZ");
loadLib("datepicker-in-all-languages/datepicker-ar");

Edit: Also take a loot at Grunt which is meant for the same purpose.You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.:

GRuntJS usage(According to their official page): With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.

Edit:

There is also a minified file of jQuery ui i18n which is being hosted by google. You can use it in single <script> tag : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js . I found it in answers here here.

Community
  • 1
  • 1
Naeem Ul Wahhab
  • 2,465
  • 4
  • 32
  • 59
0

I suggest to you bundle them all, is it small. You can do that like this:

Use i18n of jquery-ui datepicker with js ES6

First import jquery-ui from jquery-ui-bundle package (ready for webpack package manager). Then load localization from original jquery-ui lib package.

Then set localization of datepickers and finally datepickerize your date inputs.

import 'jquery-ui-bundle';
const i18n_cs = require('jquery-ui/ui/i18n/datepicker-cs');

$.datepicker.setDefaults(i18n_cs);

$('.datepicker').datepicker();
Vladimír Mlázovský
  • 121
  • 9