日期选择器不使用表单

Question

我有以下代码。理想情况下，当一切都说完后，所有日期字段都会弹出一个日期选择器。现在这条线

<p>Date: <input type="text" class="datepicker"></p>

生成所需的结果，但是，其余的日期字段保留在文本输入表单中。

非常感谢任何和所有帮助！

创建.html

{% extends "base.html" %}
{% load sekizai_tags formset_tags %}
{% block base_content %}

<link rel="stylesheet" href="/media/themes/txt/css/employee_summary/report.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
    $(function() {
        $( ".datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true,
          yearRange: "1900:2012",
    });
});
</script>

<p>Date: <input type="text" class="datepicker"></p>

{{ formset.media }}

<div id="main-wrapper">
<div class="strongborder">
    <div id="main" class="container boldtext">
        <form id="myForm" method="post" class="12u">
            {% csrf_token %}
            {% for field in form %}
                <div class="row">
                    <div class="2u">
                        {{ field.label_tag }}:
                    </div>
                    <div class="10u">
                        {{ field }}
                        {{ field.errors }}
                    </div>
                </div>
            {% endfor %}

        {% for formset in inlines %}

            <div id="formset_{{ forloop.counter0 }}" data-formset-prefix="{{ formset.prefix }}">
                {{ formset.management_form }}
                    <!-- New forms will be inserted in here -->
                    <div data-formset-body>
                        {% for form in formset %}
                            <br>
                            <br>
                            <h1>{{ form.instance.form_name }}</h1>
                            <div data-formset-form>
                                {% for field in form %}
                                    <div class="row">
                                        {% if field.label != "Employee" and field.label != "Id" and field.label != "Delete" %}
                                            <label class="2u">{{ field.label }}:</label> 
                                            <div class="10u">{{ field }}</div>
                                            {{ field.errors }}
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>


                <!-- The empty form template. By wrapping this in a <script> tag, the
                __prefix__ placeholder can easily be replaced in both attributes and
                any scripts -->
                <script type="form-template" data-formset-empty-form>
                    {% escapescript %}
                        <br>
                        <br>
                        <div data-formset-form>
                            {% for field in formset.empty_form %}
                                <div class="row">
                                    {% if field.label != "Employee" and field.label != "Id" and field.label != "Delete" %}
                                        <label class="2u">{{ field.label }}:</label> 
                                        <div class="10u">{{ field }} <br> {{ field.errors }}</div>
                                    {% endif %}
                                </div>
                            {% endfor %}

                        </div>

                    {% endescapescript %}
                </script>

                <!-- This button will add a new form when clicked -->
                <button type="button" class="text-green" data-formset-add><i class="fa fa-plus-circle"></i> Add another</button>

                <script>jQuery(function($) {
                    $("#formset_{{ forloop.counter0 }}").formset({
                        animateForms: true
                    });
                });</script>

            </div>

        {% endfor %}

        <br>
        <br>

        <div class="row 12u">
            <input type="submit" value="Save New Employee">    
        </div>

        </form>
    </div>
</div>
</div>


{% endblock %}

forms.py

from django.forms import ModelForm, DateInput
from extra_views import InlineFormSet, CreateWithInlinesView, UpdateWithInlinesView
from extra_views.generic import GenericInlineFormSet
from django.forms.models import inlineformset_factory
from employee_summary.models import Employee, Work_Record, Training_Record, FAA_Certificate

class EmployeeForm(ModelForm):
    class Meta:
        model = Employee
        widgets = {
            'date': DateInput(attrs={'class':'datepicker'})
        }


class WorkRecordFormSet(InlineFormSet):
    model = Work_Record
    prefix = "work_record"
    extra = 1


class TrainingRecordFormSet(InlineFormSet):
    model = Training_Record
    prefix = "training_record"
    extra = 1

class FAACertificateFormSet(InlineFormSet):
    model = FAA_Certificate
    prefix = "faa_certificate"
    extra = 1

Answer 1

我认为你需要处理一个类而不是 id。

所以，使用：

<p>Date: <input type="text" class="datepicker"></p>

而不是

<p>Date: <input type="text" id="datepicker"></p>