Как автоматически вставлять слеши в поля срока годности во входных данных форм django

Я хочу вставить слеш после нажатия 2 цифр, подобно тому, как это делается в формате MM/YY через Django forms input. Ниже приведен мой код, который не работает хорошо.

Models.py

from django.db import models
from creditcards.models import CardExpiryField


class MyUser(models.Model):
    cc_expiry = CardExpiryField('expiration date', null=True)

    def __str__(self):
        return self.cc_expiry

forms.py

from django import forms
from .models import MyUser
from django.forms import TextInput


class MyUserForm(forms.ModelForm):

    class Meta:
        model = MyUser
        fields = ('cc_expiry')

        widgets = {

            'cc_expiry': TextInput(attrs={'placeholder': 'MM/YY'}),

        }

views.py

def cc_page(request):
    form = MyUserForm(request.POST or None)
    context = {
        "form": form
    }
    if form.is_valid():
        form.save()
        return render(request, 'cc_thanks.html')
    return render(request, 'index.html', context)

index.html

{% load static %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="regForm" method="post" action=" ">
     {% csrf_token %}


  <div class="tab">

      {{ form.cc_expiry.errors }}
    <p>{{ form.cc_expiry|add_class:"form-control" }}</p>

  </div>


</form>

</body>
</html>

Ниже приведен простой HTML JS код для автоматической вставки слеша после нажатия 2 цифры, и он работает нормально. И результат аналогичный ожидаемому.

<input maxlength='5' placeholder="MM/YY" type="text" onkeyup="formatString(event);">
    
    <script type="text/javascript">
        function formatString(e) {
      var inputChar = String.fromCharCode(event.keyCode);
      var code = event.keyCode;
      var allowedKeys = [8];
      if (allowedKeys.indexOf(code) !== -1) {
        return;
      }
    
      event.target.value = event.target.value.replace(
        /^([1-9]\/|[2-9])$/g, '0$1/' // 3 > 03/
      ).replace(
        /^(0[1-9]|1[0-2])$/g, '$1/' // 11 > 11/
      ).replace(
        /^([0-1])([3-9])$/g, '0$1/$2' // 13 > 01/3
      ).replace(
        /^(0?[1-9]|1[0-2])([0-9]{2})$/g, '$1/$2' // 141 > 01/41
      ).replace(
        /^([0]+)\/|[0]+$/g, '0' // 0/ > 0 and 00 > 0
      ).replace(
        /[^\d\/]|^[\/]*$/g, '' // To allow only digits and `/`
      ).replace(
        /\/\//g, '/' // Prevent entering more than 1 `/`
      );
    }
    
    </script>

Я не нашел лучшего решения, как создать любую js переменную в Django формах и получить оттуда данные на переднем плане, как если бы я мог показать слеш после нажатия 2 цифр.
. Я попытался создать входной id в атрибуте формы Django, как показано ниже.

'cc_expiry': TextInput(attrs={'id': "example", 'placeholder': 'MM/YY'}),

Но я не получил желаемого результата.

Буду благодарен за любые предложения. Спасибо

Вернуться на верх