Итак, у меня есть форма создания объявления, а затем форма редактирования для каждого объявления, и каждая форма имеет свой собственный указатель даты. Моя функция для управления средством выбора даты:
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
});
});
Первоначально моя проблема заключалась в том, что использование средства выбора даты в одной из форм редактирования изменит поле в форме создания, поскольку идентификаторы были одинаковыми. Я обошел это, добавив идентификаторы (в моем forms.py) следующим образом:
end_date = forms.DateField(label='Expires', widget=forms.TextInput(attrs={'class':'datepicker form-control', 'id':'end_date_create'}))
а также
end_date = forms.DateField(label='Expires', widget=forms.TextInput(attrs={'class':'datepicker form-control', 'id':'end_date_edit'}))
в мои формы createAnnouncement и EditAnnouncement. Но поскольку у меня есть несколько форм редактирования на странице, у меня все еще есть та же проблема, когда использование средства выбора даты в любой форме редактирования изменяет поле только верхней формы редактирования. Я использую настройки виджета django для отображения своих форм, чтобы он автоматически генерировал HTML, идентификаторы, классы и все такое. Каждая форма редактирования находится в div с уникальным идентификатором, но сами поля формы называются одинаково во всех формах. Кто-нибудь знает, как я могу генерировать уникальные идентификаторы для полей формы с помощью настроек виджета django? Или, может быть, есть какой-то javascript или что-то еще, что я мог бы добавить в свою функцию выбора даты, которая сообщает средству выбора даты изменить значение поля, которое находится в том же div?
РЕДАКТИРОВАТЬ: мой шаблон выглядит так:
{% if boardAnnouncements %}
<h3>Announcements</h3>
<div class="container" style="margin: 0px; padding: 0px;">
<ul>
{% for announcement in boardAnnouncements %}
<div class="row" style="padding-bottom: 10px;">
<li>
<div class="col-md-6">
<!-- display announcement content -->
</div>
<div class="col-md-6">
<!-- edit button calls javascript function to hide/unhide div with edit form in it -->
<a href="javascript:unhide_announcement('editann-{{announcement.id}}', '{{announcement.id}}')" class="btn btn-primary" style="margin-left: 10px;"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</a>
</div>
</div>
<!-- each div gets unique id that corresponds to announcemt id -->
<div id="editann-{{announcement.id}}" class="hidden">
<form role="form" action="/editannouncement/{{announcement.id}}/" method="post">
<!-- display edit form with django widget tweaks -->
{% csrf_token %}
{% for field in editAnnouncement %}
{% if field.errors %}
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">
{{ field.label }}</label>
<div class="col-sm-10">
{{ field }}
<span class="help-block">
{% for error in field.errors %}
{{ error }}
{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="form-group">
<label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-sm-10">
{{ field }}
{% if field.help_text %}
<p class="help-block"><small>{{ field.help_text }}</small></p>
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</li>
</div>
{% endfor %}
</ul>
</div>
{% endif %}
<div>
И сгенерированный HTML для форм редактирования:
<div id="editann-1" class="unhidden">
<form class="ng-pristine ng-valid" role="form" action="/editannouncement/1/" method="post">
<input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
<div class="form-group">
<label class="col-sm-2 control-label" for="id_description">Edit Description</label>
<div class="col-sm-10">
<textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="id_end_date">Expires</label>
<div class="col-sm-10">
<input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</div>
<div id="editann-2" class="unhidden">
<form class="ng-pristine ng-valid" role="form" action="/editannouncement/2/" method="post">
<input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
<div class="form-group">
<label class="col-sm-2 control-label" for="id_description">Edit Description</label>
<div class="col-sm-10">
<textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="id_end_date">Expires</label>
<div class="col-sm-10">
<input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
</div>
</div>
</form>
</div>
Итак, чтобы уточнить, в каждом div editann-# есть форма редактирования (и каждая форма редактирования имеет средство выбора даты). Прямо сейчас, поскольку все поля формы редактирования «Expire» имеют идентификатор id_end_date, средство выбора даты изменяет значение первой формы редактирования, независимо от того, какое средство выбора даты я использую.
