Задать вопрос
@Held6991

Как инициализировать JS плагин в Django?

Здравствуйте, подскажите, пожалуйста, можно ли каким-то образом инициализировать данный JS плагин в Django?
https://github.com/jackocnr/intl-tel-input
  • Вопрос задан
  • 120 просмотров
Подписаться 2 Простой Комментировать
Решения вопроса 1
AlexNest
@AlexNest
Работаю с Python/Django
По идее - можно (по крайней мере у меня jquery плагин для даты-времени работал нормально). Создаете форму как обычно, после чего в js-скрипте выбираете нужный input.
P.S. Все скрипты/css в статике должны быть.
Пример из архива плагина
<!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>
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы