1JS Libraries required :
2======================
3https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
4https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.7/js/intlTelInput.js
5
6Inside JS File :
7================
8$("input").intlTelInput({
9 utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.4.6/js/utils.js"
10});
11
12Inside HTML File :
13===================
14<h1>International Telephone Input - BOOTSTRAP INPUT GROUP</h1>
15<form>
16 <div class="input-group">
17 <input type="tel" class="form-control">
18 <span class="input-group-addon">Tel</span>
19 </div>
20 <br>
21 <div class="input-group">
22 <input type="tel" class="form-control">
23 <span class="input-group-addon">Tel</span>
24 </div>
25</form>
26
27Inside Css File :
28=================
29body {
30 margin: 20px;
31}
32form {
33 width: 300px;
34}
35
36// workaround
37.intl-tel-input {
38 display: table-cell;
39}
40.intl-tel-input .selected-flag {
41 z-index: 4;
42}
43.intl-tel-input .country-list {
44 z-index: 5;
45}
46.input-group .intl-tel-input .form-control {
47 border-top-left-radius: 4px;
48 border-top-right-radius: 0;
49 border-bottom-left-radius: 4px;
50 border-bottom-right-radius: 0;
51}
52
53
1from phonenumber_field.modelfields import PhoneNumberField
2
3class MyModel(models.Model):
4 name = models.CharField(max_length=255)
5 phone_number = PhoneNumberField()
6 fax_number = PhoneNumberField(blank=True)
7