Package: django-intl-tel-input2
A fork fromhttps://github.com/charly06/django-intl-tel-inputwhich is a fork fromhttps://github.com/benmurden/django-intl-tel-inputA Django form widget based on the jQuery pluginintl-tel-input.This release is only to make the fork available to install as django-intl-tel-input2This is a new package, so it doesn’t implement all the features of
intl-tel-input. However, it has been stable in testing.InstallationInstall from PyPI.pipinstalldjango-intl-tel-input2Add intl-tel-input to your INSTALLED_APPS, so Django can find the init
script....INSTALLED_APPS+=('intl_tel_input',)...UsageSimply addIntlTelInputWidgetto your form field. It will add a visible text input field and a hidden input field.fromintl_tel_input.widgetsimportIntlTelInputWidgetclassMyForm(forms.ModelForm):classMeta:model=MyModelfields=['foo','bar']widgets={'bar':IntlTelInputWidget()}...With a standard form:classMyForm(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 argumentsvisible_input_attrsandhidden_input_attrscan be used to add additional HTML
attributes to the visible text input field respectively to the hidden input field.Form mediaIf 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 usecrispy-forms,
you need to setinclude_media = Falsein order to assure thatinit.jsgets loadedafterjQuery and consequently to avoid JS errors:classMyForm(forms.Form):def__init__(self,*args,**kwargs):...self.helper=FormHelper()self.helper.include_media=False...If you useself.helper.include_media = Falsein your form, you
have to add{{ form.media.css }}to your template
where this widget appears in order to loadintlTelInput.css.If you need to load all JS in the head, you can make theinit.jsscript
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 calledform.OptionsThe widget can be invoked with most keyword arguments which translate to theoptionsavailable in the jQuery plugin intl-tel-input.allow_dropdownType:BooleanDefault:TrueExample usage:classMyForm(forms.Form):tel_number=forms.CharField(widget=IntlTelInputWidget(allow_dropdown=False,))...auto_hide_dial_codeType:BooleanDefault:Trueauto_placeholderType:StringDefault:"polite"custom_placeholderThis option is not implemented yet.dropdown_containerType:StringDefault:""exclude_countriesType:ListDefault:[]Example usage:classMyForm(forms.Form):tel_number=forms.CharField(widget=IntlTelInputWidget(exclude_countries=['at','de','ch'],))...format_on_displayType:BooleanDefault:Trueauto_geo_ipType:BooleanDefault:FalseThis option represents geoIpLookup. If set toTrue, the user’s location is lookup up.
In order to lookup the user’s location,https://freegeoip.net/json/is used.initial_countryType:StringDefault:""national_modeType:BooleanDefault:Trueplaceholder_number_typeType:StringDefault:"MOBILE"only_countriesType:ListDefault:[]preferred_countriesType:ListDefault:['us', 'gb']separate_dial_codeType:BooleanDefault:False