My Django admin page features a model with a DateField called 'date':
# models.py
class Article(models.Model):
date = models.DateField(
help_text="Article publication date"
)
# admin.py
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
change_form_template = "article_extension.html"
To enhance the Admin add/change template for this model, I included JavaScript that triggers when a date is selected.
Within the Admin add/change page, the default widget for this field is a text element with a calendar selector. The source code does not display any specific code for the selector; thus, the JavaScript can only be linked to the input box:
<input type="text" ... id="id_date">
In the template's JavaScript file, an EventListener was connected to 'input' events on this input box:
# article_extension.html
{% extends "admin/change_form.html" %}
{% block extrahead %}
block.super
<script type="text/javascript">
window.onload = function() {
var dateInput = document.getElementById("id_date");
dateInput.addEventListener('input', dateListener);
function dateListener() {
console.log("date event recognized");
}
}
</script>
{% endblock %}
When selecting a date from the calendar selector, the input box content updates accordingly but fails to trigger the EventListener. However, manually entering text into the input box causes the EventListener to fire, displaying "date event recognized" in the console. It appears that using the calendar selection method does not register as an "input".
I am seeking guidance on how to attach an EventListener to either the input box or the calendar to activate when choosing a date from the calendar.