django-intl-tel-input2
======================

A fork from https://github.com/charly06/django-intl-tel-input
which is a fork from https://github.com/benmurden/django-intl-tel-input
A Django form widget based on the jQuery plugin `intl-tel-input`_.

This release is only to make the fork available to install as django-intl-tel-input2

This is a new package, so it doesn't implement all the features of
intl-tel-input. However, it has been stable in testing.

Installation
------------

Install from PyPI.

.. code:: shell

    pip install django-intl-tel-input2

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

.. code:: python

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

Usage
-----

Simply add ``IntlTelInputWidget`` to your form field. It will add a visible text input field and a hidden input field.

.. code:: python

    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:

.. code:: python

    class MyForm(forms.Form):
        tel_number = forms.CharField(widget=IntlTelInputWidget(
            visible_input_attrs={
                'size': '30',
                'class': 'my-css-class',
                ...
            },
            hidden_input_attrs={
                'class': 'another-css-class',
                ...
            }
        ))
        ...

The two arguments ``visible_input_attrs`` and ``hidden_input_attrs`` can be used to add additional HTML 
attributes to the visible text input field respectively to the hidden input field. 


Form media
----------

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 load jQuery in the head of your document, you needn't worry about
this step - widget media will be inserted right after the field. If you
want to keep all JS at the end of your document, you can still use the
``{{ form.media.js }}`` tag to achieve that. However, if you use `crispy-forms`_,
you need to set ``include_media = False`` in order to assure that ``init.js``
gets loaded **after** jQuery and consequently to avoid JS errors:

.. code:: python

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

If you use ``self.helper.include_media = False`` in your form, you
have to add ``{{ form.media.css }}`` to your template
where this widget appears in order to load ``intlTelInput.css``.

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.

.. code:: javascript

    jQuery(document).ready(
      {{ form.media.js }}
    );
    
All this assumes your form context variable is called ``form``.

.. _intl-tel-input: https://github.com/jackocnr/intl-tel-input
.. _crispy-forms: https://github.com/django-crispy-forms/django-crispy-forms

Options
-------

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

allow_dropdown
  Type: ``Boolean`` Default: ``True``

  Example usage:

    .. code:: python
    
        class MyForm(forms.Form):
                tel_number = forms.CharField(widget=IntlTelInputWidget(
                    allow_dropdown=False,
                ))
                ...

auto_hide_dial_code
  Type: ``Boolean`` Default: ``True``

auto_placeholder
  Type: ``String`` Default: ``"polite"``

custom_placeholder
  This option is not implemented yet.

dropdown_container
  Type: ``String`` Default: ``""``

exclude_countries
  Type: ``List`` Default: ``[]``

  Example usage:

    .. code:: python
    
        class MyForm(forms.Form):
                tel_number = forms.CharField(widget=IntlTelInputWidget(
                    exclude_countries=['at', 'de', 'ch'],
                ))
                ...

format_on_display
  Type: ``Boolean`` Default: ``True``

auto_geo_ip
  Type: ``Boolean`` Default: ``False``

  This option represents geoIpLookup. If set to ``True``, the user's location is lookup up. 
  In order to lookup the user's location, https://freegeoip.net/json/ is used.

initial_country
  Type: ``String`` Default: ``""``

national_mode
  Type: ``Boolean`` Default: ``True``

placeholder_number_type
  Type: ``String`` Default: ``"MOBILE"``

only_countries  
  Type: ``List`` Default: ``[]``  

preferred_countries
  Type: ``List`` Default: ``['us', 'gb']``

separate_dial_code
  Type: ``Boolean`` Default: ``False``

.. _options: https://github.com/jackocnr/intl-tel-input/blob/master/README.md#options
