Fix clear input on form reset, fix #110

Author: monim67

dev/myapp/templates/myapp/bootstrap3/custom-form.html

@@ -22,6 +22,7 @@
       {% bootstrap_form form %}
       {% buttons %}
       <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+      <button type="reset" class="btn btn-warning">Reset</button>
       {% endbuttons %}
     </form>
   </div>

dev/myapp/templates/myapp/bootstrap3/custom-formset.html

@@ -26,6 +26,7 @@
       {% endfor %}
       {% buttons %}
       <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+      <button type="reset" class="btn btn-warning">Reset</button>
       {% endbuttons %}
     </form>
   </div>

dev/myapp/templates/myapp/bootstrap3/modal-form.html

@@ -8,6 +8,7 @@ <h3>{{ title_text }}</h3>
         {% bootstrap_form form %}
         {% buttons %}
         <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+        <button type="reset" class="btn btn-warning">Reset</button>
         {% endbuttons %}
       </form>
     </div>

dev/myapp/templates/myapp/bootstrap4/custom-form.html

@@ -18,6 +18,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 4</h2>
       {% bootstrap_form form %}
       {% buttons %}
       <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+      <button type="reset" class="btn btn-warning">Reset</button>
       {% endbuttons %}
     </form>
   </div>

dev/myapp/templates/myapp/bootstrap4/custom-formset.html

@@ -27,6 +27,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 4</h2>
       {% endfor %}
       {% buttons %}
       <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+      <button type="reset" class="btn btn-warning">Reset</button>
       {% endbuttons %}
     </form>
   </div>

dev/myapp/templates/myapp/bootstrap4/modal-form.html

@@ -8,6 +8,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 4</h2>
         {% bootstrap_form form %}
         {% buttons %}
         <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+        <button type="reset" class="btn btn-warning">Reset</button>
         {% endbuttons %}
       </form>
     </div>

dev/myapp/templates/myapp/bootstrap5/custom-form.html

@@ -17,6 +17,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 5</h2>
       {% csrf_token %}
       {% bootstrap_form form %}
       <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+      <button type="reset" class="btn btn-warning">Reset</button>
     </form>
   </div>
 </div>

dev/myapp/templates/myapp/bootstrap5/custom-formset.html

@@ -27,6 +27,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">Custom Form with Bootstrap 5</h2>
       {% endfor %}
       <div class="mt-2">
         <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+        <button type="reset" class="btn btn-warning">Reset</button>
       </div>
     </form>
   </div>

dev/myapp/templates/myapp/bootstrap5/modal-form.html

@@ -8,6 +8,7 @@ <h2 class="pb-2 mt-4 mb-2 border-bottom">{{ title_text }}</h2>
         {% bootstrap_form form %}
         {% bootstrap_alert "Demo site is static HTML clone of django, submitting won't work" alert_type='warning' %}
         <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
+        <button type="reset" class="btn btn-warning">Reset</button>
       </form>
     </div>
   </div>

src/bootstrap_datepicker_plus/static/bootstrap_datepicker_plus/js/datepicker-widget.js

@@ -92,6 +92,11 @@
     const widgetInstance = createWidgetInstance(inputWrapper, hiddenInputElement, config);
     widgetInstances.set(hiddenInputElement, widgetInstance);
 
+    const form = hiddenInputElement.closest("form");
+    form?.addEventListener("reset", () => {
+      setTimeout(() => inputElement.dispatchEvent(new Event("change")));
+    })
+
     if (config.range_from) {
       const widgetRangeFromInstance = getRangeFromInputElement(hiddenInputElement, config);
       if (widgetRangeFromInstance) {