How to initialize JS plugin in Django?

H

Held69912021-10-11 03:55:26

JavaScript

Held6991, 2021-10-11 03:55:26

Hello, tell me, please, is it possible to somehow initialize this JS plugin in Django?
https://github.com/jackocnr/intl-tel-input

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Nesterov, 2021-10-11
@Held6991

In theory, it is possible (at least for me the jquery plugin for date-time worked fine). You create the form as usual, after which you select the desired input in the js script.
PS All scripts/css should be static.

Example from plugin archive

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>International Telephone Input</title>
  <link rel="stylesheet" href="build/css/intlTelInput.css"> 
  <link rel="stylesheet" href="build/css/demo.css">
</head>

<body>
  <h1>International Telephone Input</h1>
  <form>
    {% csrf....
    {{ form.as_p }} // Форма
    <button type="submit">Submit</button>
  </form>

  <script src="build/js/intlTelInput.js"></script>
  <script>
    var input = document.querySelector("#phone"); // ID соответствующего инпута из формы
    window.intlTelInput(input, {
      // allowDropdown: false,
      // autoHideDialCode: false,
      // autoPlaceholder: "off",
      // dropdownContainer: document.body,
      // excludeCountries: ["us"],
      // formatOnDisplay: false,
      // geoIpLookup: function(callback) {
      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      //     var countryCode = (resp && resp.country) ? resp.country : "";
      //     callback(countryCode);
      //   });
      // },
      // hiddenInput: "full_number",
      // initialCountry: "auto",
      // localizedCountries: { 'de': 'Deutschland' },
      // nationalMode: false,
      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
      // placeholderNumberType: "MOBILE",
      // preferredCountries: ['cn', 'jp'],
      // separateDialCode: true,
      utilsScript: "build/js/utils.js", // Естественно скрипты должны быть в папке со статикой
    });
  </script>
</body>

</html>