Автоматическое вычисление поля ModelForm по щелчку пользователя

В настоящее время в моей форме есть раздел, который выглядит следующим образом:

enter image description here

В этой форме мне нужно рассчитать предварительную налоговую дату 1 и предварительную налоговую дату 2 на основе поля "Конец финансового года" (предварительная налоговая дата 1 должна быть через 6 месяцев после окончания финансового года; предварительная налоговая дата 2 должна быть 31 декабря в год окончания финансового года)

Мне также нужно, чтобы это происходило в реальном времени, так что как только пользователь изменит поле "Конец финансового года", оно обновит остальные 2

Если у кого-нибудь есть пример кода, чтобы помочь с этим, он будет очень признателен.

Пожалуйста, посмотрите приведенный ниже код из моего проекта:

Views.py:

def newCompany(request):
    form = CompanyForm()

    if request.method == 'POST':
        form = CompanyForm(request.POST)

        if form.is_valid():
            form.save()

            return redirect('home')
        else:
            print(form.errors)

    content = {'form':form}
    return render(request, 'main/newCompany.html', content)

Models.py

class CompanyClass(models.Model):
    
    CompanyName = models.CharField(max_length=50 , blank=False)
    RefNo = models.CharField(max_length=50 , blank=False )
    FinancialYearEnd = models.DateField(auto_now=False, auto_now_add=False, null=False)
    ProvisionalTaxDate1 = models.DateField(auto_now=False, auto_now_add=False) 
    ProvisionalTaxDate2 = models.DateField(auto_now=False, auto_now_add=False)
    ARMonth = models.DateField(auto_now=False, auto_now_add=False)


    checklist=models.ManyToManyField(Task)
    def __str__(self):
        return ( self.CompanyName)

Forms.py

class CompanyForm(ModelForm):
    class Meta:
        model = CompanyClass
        fields = '__all__'
        widgets = {
            'FinancialYearEnd' : forms.SelectDateWidget,
            'ProvisionalTaxDate1' : forms.SelectDateWidget,
            'ProvisionalTaxDate2' : forms.SelectDateWidget,
            'ARMonth' : forms.SelectDateWidget,
        }

Template.html:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
{% extends "main/base.html"%}

{% block content %}
<form class="form-group mt-4" action="" method="POST">
    {% csrf_token %}
    <h1 style="text-align: center "> New Company Customer </h1>
    <br>
    <div style="text-align: left; width: 100%; padding-left: 40px; padding-right: 60px">
        <div class="row mb-3">
            <div class="col">
                <ul >
                <li class='list-group-item ' style="background-color : #282828; color: white;">Company General Information</li>
                <li class='list-group-item' style="border: 1px solid black;" style="border: 1px solid black;">Company Name {{ form.CompanyName }}</li>
                <li class='list-group-item' style="border: 1px solid black;">Company Reference Number {{ form.RefNo }}</li>
                <li class='list-group-item' style="border: 1px solid black;">Tax Registration Number {{ form.TaxRegNo }}</li>
                <li class='list-group-item' style="border: 1px solid black;">Financial Year End   {{ form.FinancialYearEnd }}</li>
                <li class='list-group-item' style="border: 1px solid black;">AR Month  {{ form.ARMonth }}</li>
                <li class='list-group-item' style="border: 1px solid black;">Provisional Tax Date 1  {{ form.ProvisionalTaxDate1 }}</li>
                <li class='list-group-item' style="border: 1px solid black;">Provisional Tax Date 2  {{ form.ProvisionalTaxDate2 }}</li>
                </ul>
            </div>
           
    <div class="row mb-3">
        <button type="submit" name="button" class="btn btn-primary "> Submit </button>
    </div>

    </div>
</form>
{% endblock %}
Вернуться на верх