Clear datepicker when form is reset

[Joseph Hanna]

Describe the problem
I am encountering an issue with resetting the datepicker widget in my form. While the form input value clears as expected upon reset, the datepicker widget itself does not reset, maintaining its last selected value.

I attempted to resolve this by clearing the datepicker using JavaScript, following the guidelines provided in the datepicker documentation. However, I discovered that the DateTimePicker data attribute does not exist on the widget, leading to difficulties in implementing the reset functionality.

To Reproduce
This is my html rendered code:

<form hx-trigger="submit, updateTable from:body" hx-get="/mantenimiento/cupos_transportistas/cupo_regular_aerolinea/" hx-target="#table-container" hx-swap="outerHTML" hx-indicator="#bar-indicator" class="form-inline">
        <div class="row justify-content-end">

 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" media="all" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.49/build/css/bootstrap-datetimepicker.min.css" media="all" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/monim67/django-bootstrap-datepicker-plus@5.0.2/src/bootstrap_datepicker_plus/static/bootstrap_datepicker_plus/css/datepicker-widget.css" media="all" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment-with-locales.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eonasdan-bootstrap-datetimepicker@4.17.49/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/monim67/django-bootstrap-datepicker-plus@5.0.2/src/bootstrap_datepicker_plus/static/bootstrap_datepicker_plus/js/datepicker-widget.js"></script> <div class="col-12 col-md-6 col-lg-2"> <div id="div_id_aerolinea" class="mb-3"> <label for="id_aerolinea_filter" class="form-label">
                Aerolínea
            </label> <select name="aerolinea" id="id_aerolinea_filter" class="select form-select"> <option value="" selected="">---------</option> <option value="2">(LA) LAN AIRLINES</option> <option value="3">(QR) QATAR AIRWAYS</option> <option value="5">(TE) TEST AIRLINE</option>

</select> </div> </div>
<div class="col-12 col-md-6 col-lg-2"> <div id="div_id_valid_for" class="mb-3"> <label for="id_valid_for_filter" class="form-label">
                Vigente el:
            </label> <div class="input-group dbdp"> <input type="text" id="id_valid_for_filter" class="datepickerinput form-control" data-dbdp-config="{&quot;variant&quot;:&quot;date&quot;,&quot;backend_date_format&quot;:&quot;YYYY-MM-DD&quot;,&quot;options&quot;:{&quot;showClose&quot;:true,&quot;showClear&quot;:true,&quot;showTodayButton&quot;:true,&quot;allowInputToggle&quot;:true,&quot;format&quot;:&quot;DD/MM/YYYY&quot;}}" data-dbdp-debug="" data-name="valid_for"> <div class="input-group-addon input-group-append input-group-text"> <i class="bi-calendar"></i> </div>
</div><input type="hidden" name="valid_for" value="2023-12-22">

<script>
  // This script is only added when DEBUG=True to check if media files are loaded
  if (!window.dbdpMediaCheckerRegistered) {
    document.addEventListener("DOMContentLoaded", () => {
      setTimeout(() => {
        if (!window.dbdpInitialized) {
          const errorDisplay = document.createElement("div");
          errorDisplay.className = "alert alert-danger"
          errorDisplay.innerHTML = "form.media was not loaded, did you forget to add it to template? This message is only visible when DEBUG=True";
          for (let el of document.querySelectorAll("[data-dbdp-config]")) el.closest(".dbdp").after(errorDisplay.cloneNode(true));
        }
      })
    });
    window.dbdpMediaCheckerRegistered = true;
  }
</script> </div> </div>
<div class="col-lg-2 my-auto text-center"> <div class="row form-row px-2"> <input type="submit" name="submit" value="Filtrar" class="btn btn-primary col-6 col-md-6" id="submit-id-submit">
<input type="reset" name="reset-filter" value="Borrar Filtros" class="btn btn-inverse col-6 col-md-6 text-muted text-decoration-underline" id="reset-id-reset-filter" hx-get="#" hx-indicator="#bar-indicator" hx-swap="outerHTML" hx-target="#table-container" hx-trigger="click">

</div>

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

The issue arises when I use the reset button. Although the input field clears, the datepicker widget does not reset. Consequently, when submitting the form, it still uses the previously entered date.

Console errors
document.getElementById("id_valid_for_filter").data("DateTimePicker") returns Uncaught TypeError: document.getElementById(...).data is not a function at <anonymous>:1:48

document.getElementById("id_valid_for_filter").dateTimePickerData returns undefined

[x] I have followed the configuration instructions and checked out the
common error troubleshooting page.