|
| 1 | +Django intl-tel-input |
| 2 | +===================== |
| 3 | + |
| 4 | +[](https://travis-ci.org/benmurden/django-intl-tel-input) |
| 5 | + |
| 6 | +[](https://codecov.io/gh/benmurden/django-intl-tel-input) |
| 7 | + |
| 8 | +A Django form widget for international telephone numbers based on the |
| 9 | +jQuery plugin |
| 10 | +[intl-tel-input](https://github.com/jackocnr/intl-tel-input). |
| 11 | + |
| 12 | +This is a new package, so it doesn't implement all the features of |
| 13 | +intl-tel-input. However, it is well tested, and has been stable in |
| 14 | +production. |
| 15 | + |
| 16 | +### Version support |
| 17 | + |
| 18 | +Tested on the following versions of Python and Django. |
| 19 | + |
| 20 | +| Package | Version support | |
| 21 | +| ------- | --------------- | |
| 22 | +| Python | 2.7, 3.4, 3.5, 3.6 | |
| 23 | +| Django | 1.8, 1.9, 1.10, 1.11 | |
| 24 | + |
| 25 | +### Installation |
| 26 | + |
| 27 | +Install from PyPI. |
| 28 | + |
| 29 | +```shell |
| 30 | +pip install django-intl-tel-input |
| 31 | +``` |
| 32 | + |
| 33 | +Add intl-tel-input to your INSTALLED\_APPS, so Django can find the init |
| 34 | +script. |
| 35 | + |
| 36 | +```python |
| 37 | +... |
| 38 | +INSTALLED_APPS += ('intl_tel_input',) |
| 39 | +... |
| 40 | +``` |
| 41 | + |
| 42 | +### Usage |
| 43 | + |
| 44 | +Simply add `IntlTelInputWidget` to your form field. |
| 45 | + |
| 46 | +```python |
| 47 | +from intl_tel_input.widgets import IntlTelInputWidget |
| 48 | + |
| 49 | +class MyForm(forms.ModelForm): |
| 50 | + class Meta: |
| 51 | + model = MyModel |
| 52 | + fields = ['foo', 'bar'] |
| 53 | + widgets = { |
| 54 | + 'bar': IntlTelInputWidget() |
| 55 | + } |
| 56 | +... |
| 57 | +``` |
| 58 | + |
| 59 | +With a standard form: |
| 60 | + |
| 61 | +```python |
| 62 | +class MyForm(forms.Form): |
| 63 | + tel_number = forms.CharField(widget=IntlTelInputWidget()) |
| 64 | + |
| 65 | +... |
| 66 | +``` |
| 67 | + |
| 68 | +### Form media |
| 69 | + |
| 70 | +Include `{{ form.media.css }}` in the `<head>` of your template. This |
| 71 | +will ensure all styles are parsed before the widget is displayed. |
| 72 | + |
| 73 | +If you have included jQuery at the end of your document, then don't |
| 74 | +forget to update the template where this widget appears with a |
| 75 | +`{{ form.media.js }}`. Put it in a block that allows it to come after |
| 76 | +jQuery. |
| 77 | + |
| 78 | +If you're using |
| 79 | +[crispy-forms](https://github.com/django-crispy-forms/django-crispy-forms), |
| 80 | +the static content will be inserted automatically beside the input. To |
| 81 | +prevent this, be sure to set `include_media = False` on your form |
| 82 | +helper. |
| 83 | + |
| 84 | +```python |
| 85 | +class MyForm(forms.Form): |
| 86 | +... |
| 87 | + def __init__(self, *args, **kwargs): |
| 88 | + self.helper = FormHelper() |
| 89 | + self.helper.include_media = False |
| 90 | +... |
| 91 | +``` |
| 92 | + |
| 93 | +If you need to load all JS in the head, you can make the `init.js` |
| 94 | +script wait for the document to be ready with the following snippet. |
| 95 | + |
| 96 | +```javascript |
| 97 | +jQuery(document).ready( |
| 98 | + {{ form.media.js }} |
| 99 | +); |
| 100 | +``` |
| 101 | + |
| 102 | +All this assumes your form context variable is called `form`. |
| 103 | + |
| 104 | +## Options |
| 105 | + |
| 106 | +The widget can be invoked with keyword arguments which translate to the |
| 107 | +options available in intl-tel-input. |
| 108 | + |
| 109 | +### allow\_dropdown |
| 110 | +Shows the country dropdown. |
| 111 | +Default: `True` |
| 112 | + |
| 113 | +### default\_code |
| 114 | +Country code selected by default. Overridden when using `auto_geo_ip`. |
| 115 | +Default: `'us'` |
| 116 | + |
| 117 | +### preferred\_countries |
| 118 | +Array of countries that will always appear at the top of the dropdown. |
| 119 | +Default: `['us', 'gb']` |
| 120 | + |
| 121 | +### auto\_geo\_ip |
| 122 | +When True, [freegeoip](https://freegeoip.net) will be used to autodetect the user's country via Ajax. There is a limit of 15,000 queries per hour, so it should not be used on high-traffic sites. Alternatively use [pygeoip](https://pypi.python.org/pypi/pygeoip), detect server-side, then set the `default_code`. |
| 123 | +Default: `False` |
0 commit comments