自定义日期选择器功能仅填写具有相同字段的多个表单的第一个Django表单的字段

Question

我有三种django形式，其中有两个字段都是多字段。所有这些字段都有两个输入。我这样做是为了将这些字段连接到datepicker，并给出日期范围。第一个输入将获取开始日期，第二个输入将获取结束日期。下面是相关代码：

forms.py

class FirstDateRangeWidget(forms.MultiWidget):
    def __init__(self, attrs=None):
        widgets = (
            forms.TextInput(attrs={'class': 'form-control first-from', 'placeholder': 'From'}),
            forms.TextInput(attrs={'class': 'form-control first-to', 'placeholder': 'To'})
        )
        super(FirstDateRangeWidget, self).__init__(widgets, attrs)

    def decompress(self, value):
        if value:
            return value
        return [None, None]


class FirstDateRangeField(forms.MultiValueField):
    widget = FirstDateRangeWidget

    def __init__(self, *args, **kwargs):
        fields = (
            forms.CharField(),
            forms.CharField(),
        )
        super(FirstDateRangeField, self).__init__(fields, *args, **kwargs)

    def compress(self, data_list):
        return data_list


class SecondDateRangeWidget(forms.MultiWidget):
    def __init__(self, attrs=None):
        widgets = (
            forms.TextInput(attrs={'class': 'form-control second-from', 'placeholder': 'From'}),
            forms.TextInput(attrs={'class': 'form-control second-to', 'placeholder': 'To'})
        )
        super(SecondDateRangeWidget, self).__init__(widgets, attrs)

    def decompress(self, value):
        if value:
            return value
        return [None, None]


class SecondDateRangeField(forms.MultiValueField):
    widget = SecondDateRangeWidget

    def __init__(self, *args, **kwargs):
        fields = (
            forms.CharField(),
            forms.CharField(),
        )
        super(SecondDateRangeField, self).__init__(fields, *args, **kwargs)

    def compress(self, data_list):
        return data_list

class FirstForm(forms.Form):
    first_field = FirstDateRangeField()
    second_field = SecondDateRangeField()

class SecondForm(forms.Form):
    first_field = FirstDateRangeField()
    second_field = SecondDateRangeField()

class ThirdForm(forms.Form):
    first_field = FirstDateRangeField()
    second_field = SecondDateRangeField()

template.html

{% block main_content %}
    <form class="form" method="GET" action="/first_form">
        {% csrf_token %}
        {% for each in search_form %}
            <em class="text-red">{{ each.errors }}</em>
            <label for="{{ each.id_for_label }}">{{each.label}}:</label>
            {{ each.help_text }}
            {{ each }}
        {% endfor %}
    </form>

    <form class="form" method="GET" action="/second_form">
        {% csrf_token %}
        {% for each in search_form %}
            <em class="text-red">{{ each.errors }}</em>
            <label for="{{ each.id_for_label }}">{{each.label}}:</label>
            {{ each.help_text }}
            {{ each }}
        {% endfor %}
    </form>

    <form class="form" method="GET" action="/third_form">
        {% csrf_token %}
        {% for each in search_form %}
            <em class="text-red">{{ each.errors }}</em>
            <label for="{{ each.id_for_label }}">{{each.label}}:</label>
            {{ each.help_text }}
            {{ each }}
        {% endfor %}
    </form>
{% endblock %}
{% block extra_javascript %}
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".first-from" ).first()
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".first-to" ).first().datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".second-from" ).first()
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".second-to" ).first().datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".first-from" ).eq(1)
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".first-to" ).eq(1).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".second-from" ).eq(1)
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".second-to" ).eq(1).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".first-from" ).eq(2)
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".first-to" ).eq(2).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
    <script>
        $( function() {
            var dateFormat = "yy-mm-dd",
              from = $( ".second-from" ).eq(2)
                .datepicker({
                  defaultDate: "+1w",
                  changeMonth: true,
                  numberOfMonths: 3,
                    changeYear: true,
                    dateFormat: "yy-mm-dd"
                })
                .on( "change", function() {
                  to.datepicker( "option", "minDate", getDate( this ) );
                }),
              to = $( ".second-to" ).eq(2).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                  changeYear: true,
                  dateFormat: "yy-mm-dd"
              })
              .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
              });

            function getDate( element ) {
              var date;
              try {
                date = $.datepicker.parseDate( dateFormat, element.value );
              } catch( error ) {
                date = null;
              }

              return date;
            }
          } );
    </script>
{% endblock %}

javascript应该做的是使它成为可能，以便在单击字段后从日期选择器中选择日期，将使用您选择的日期填充该字段。取而代之的是，无论您在哪个字段中选择了日期，都只填写第一个表单中的字段。例如，在first_field字段的第二个表单的first-from输入中选择一个日期将首先填充first_field字段，从第一个表单的输入开始，然后在第二个表单的第二个输入字段中从第一个表单的输入中选择一个日期，将在第一个表单的第二个输入字段中填充第一个表单的输入。

我真的希望这有意义。要阅读很多东西，但是老实说我看不出我的代码有什么问题。也许还有另一种写我想做的事的方式？谢谢。