Send date to Template of django - django

Question

in my project, user after register can complete his information in another form. after completed this form and submitted it every time he visits this page, he sees the completed form. but i have a problem in this form, calender of user's birthday field works well at the first time when field is empty, but after the form is completed and submitting when the user wants to change it the calendar looks like this:
models.py:
from django.db import models
from django.contrib.auth.models import User
class UserProfile(models.Model):
ED_CHOICES = [
('hs', 'High school'),
('bc', 'Bachelor'),
('ms', 'Master'),
('do', 'Doctor'),
]
user = models.OneToOneField(User, on_delete=models.CASCADE)
phone = models.CharField(max_length=13)
birthday = models.DateField()
education = models.CharField(max_length=20, choices=ED_CHOICES)
gender = models.CharField(max_length=15)
forms.py:
class ProfileForm(forms.ModelForm):
ED_CHOICES = [
('hs', 'High school'),
('bc', 'Bachelor'),
('ms', 'Master'),
('do', 'Doctor'),
]
phone = forms.CharField(
widget=forms.TextInput(attrs={'class': 'input--style-4'}),
label=''
)
birthday = forms.DateField(
widget=forms.DateInput(attrs={'class': 'input--style-4 js-datepicker'}),
label=''
)
education = forms.CharField(
widget=forms.Select(choices=ED_CHOICES, attrs={'class': 'select-dropdown'}),
label=''
)
gender = forms.CharField(
widget=forms.TextInput(attrs={'class': 'radio-container m-r-45'}),
label=''
)
class Meta:
model = models.UserProfile
fields = ['phone', 'birthday', 'education', 'gender']
views.py:
from django.shortcuts import render, redirect
from . import forms, models
from django.contrib.auth import get_user_model
my_user = get_user_model()
my_profile = models.UserProfile
first = True
def profile(request, slug):
global first
user = my_user.objects.get(username=slug)
if first:
pro_form = forms.ProfileForm(request.POST or None)
else:
pro = my_profile.objects.get(user=user)
pro_form = forms.ProfileForm(request.POST or None, instance=pro)
form = forms.UserProfile(request.POST or None, instance=user)
context = {'FORM': form, 'PRO': pro_form, 'USER': user}
if form.is_valid() and pro_form.is_valid():
form.save()
pro = pro_form.save(commit=False)
pro.user = user
pro.save()
first = False
if 'gender' in request.POST:
pro_form.gender = request.POST.get('gender')
return redirect('HOME')
return render(request, 'accounts/index.html', context)
template:
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<label class="label">Birthday</label>
<div class="input-group-icon">
{{ PRO.birthday }}
<i class="zmdi zmdi-calendar-note input-icon js-btn-calendar"></i>
</div>
</div>
</div>
js:
(function ($) {
'use strict';
/*==================================================================
[ Daterangepicker ]*/
try {
$('.js-datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoUpdateInput": false,
locale: {
format: 'DD/MM/YYYY'
},
});
var myCalendar = $('.js-datepicker');
var isClick = 0;
$(window).on('click',function(){
isClick = 0;
});
$(myCalendar).on('apply.daterangepicker',function(ev, picker){
isClick = 0;
$(this).val(picker.startDate.format('DD/MM/YYYY'));
});
$('.js-btn-calendar').on('click',function(e){
e.stopPropagation();
if(isClick === 1) isClick = 0;
else if(isClick === 0) isClick = 1;
if (isClick === 1) {
myCalendar.focus();
}
});
$(myCalendar).on('click',function(e){
e.stopPropagation();
isClick = 1;
});
$('.daterangepicker').on('click',function(e){
e.stopPropagation();
});
} catch(er) {console.log(er);}
/*[ Select 2 Config ]
===========================================================*/
try {
var selectSimple = $('.js-select-simple');
selectSimple.each(function () {
var that = $(this);
var selectBox = that.find('select');
var selectDropdown = that.find('.select-dropdown');
selectBox.select2({
dropdownParent: selectDropdown
});
});
} catch (err) {
console.log(err);
}
})(jQuery);