Skip to main content

A Django form widget implementing intl-tel-input.

Project description

Django intl-tel-input

Build Status Code coverage

A Django form widget for international telephone numbers based on the jQuery plugin intl-tel-input.

This package is pre 1.0, so doesn't implement every feature of intl-tel-input. However, it is well tested, and has been stable in production.

Version support

Tested on the following versions of Python and Django.

Package Version support
Python 2.7, 3.4, 3.5, 3.6, 3.7
Django 1.11, 2.0, 2.1

Installation

Install from PyPI.

pip install django-intl-tel-input

Add intl-tel-input to your INSTALLED_APPS, so Django can find the init script.

...
INSTALLED_APPS += ('intl_tel_input',)
...

Usage

Simply add IntlTelInputWidget to your form field.

from intl_tel_input.widgets import IntlTelInputWidget

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = ['foo', 'bar']
        widgets = {
            'bar': IntlTelInputWidget()
        }
...

With a standard form:

class MyForm(forms.Form):
    tel_number = forms.CharField(widget=IntlTelInputWidget())

...

Form media

Include {{ form.media.css }} in the <head> of your template. This will ensure all styles are parsed before the widget is displayed.

If you have included jQuery at the end of your document, then don't forget to update the template where this widget appears with a {{ form.media.js }}. Put it in a block that allows it to come after jQuery.

If you're using crispy-forms, the static content will be inserted automatically beside the input. To prevent this, be sure to set include_media = False on your form helper.

class MyForm(forms.Form):
...
    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.include_media = False
...

If you need to load all JS in the head, you can make the init.js script wait for the document to be ready with the following snippet.

jQuery(document).ready(
  {{ form.media.js }}
);

All this assumes your form context variable is called form.

Options

The widget can be invoked with keyword arguments which translate to the options available in intl-tel-input.

allow_dropdown

Shows the country dropdown. Default: True

default_code

Country code selected by default. Overridden when using auto_geo_ip. Default: 'us'

preferred_countries

Array of countries that will always appear at the top of the dropdown. Default: ['us', 'gb']

use_default_init

Use the provided init.js to initialize the plugin. Set this to False if you want to provide your own initialization for the plugin. This is useful if, for example, you have your own GeoIP implementation you'd like to use. Default: True

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-intl-tel-input-0.3.1.tar.gz (11.2 kB view details)

Uploaded Source

Built Distribution

django_intl_tel_input-0.3.1-py2.py3-none-any.whl (15.4 kB view details)

Uploaded Python 2 Python 3

File details

Details for the file django-intl-tel-input-0.3.1.tar.gz.

File metadata

  • Download URL: django-intl-tel-input-0.3.1.tar.gz
  • Upload date:
  • Size: 11.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.19.1 setuptools/40.6.2 requests-toolbelt/0.9.1 tqdm/4.26.0 CPython/3.7.2

File hashes

Hashes for django-intl-tel-input-0.3.1.tar.gz
Algorithm Hash digest
SHA256 4ba2da092fca6e1dce550cf5290eb80f569fcbb6fa9c8fc21dd70efe6791f7cc
MD5 4e95b127f577fd9f402b034059e1ea93
BLAKE2b-256 24ee6994557da95d83e8f520483618166e82706ab5374f3c7eda9025b627071a

See more details on using hashes here.

File details

Details for the file django_intl_tel_input-0.3.1-py2.py3-none-any.whl.

File metadata

  • Download URL: django_intl_tel_input-0.3.1-py2.py3-none-any.whl
  • Upload date:
  • Size: 15.4 kB
  • Tags: Python 2, Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.19.1 setuptools/40.6.2 requests-toolbelt/0.9.1 tqdm/4.26.0 CPython/3.7.2

File hashes

Hashes for django_intl_tel_input-0.3.1-py2.py3-none-any.whl
Algorithm Hash digest
SHA256 b29ebebf8e316d992162742368e7c08eb9b2b604ee3b9bab6183a6c2d0c9e3ce
MD5 fa1292cb9240e3fd09ba6c12fef1955d
BLAKE2b-256 9445dbe1787c5a51f4f8814ae65c276ba9dc78c35bb4fdbcc950496b4b611f61

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page