Displayed date changes on reload due to custom format

[H4rryK4ne]

Describe the problem
I created a custom DateField:

class GermanDateField(django.forms.DateField):
    widget = bootstrap_datepicker_plus.widgets.DatePickerInput(
        options={
            "format": "DD.MM.YYYY",
            "locale": "de",
        },
    )

When I load the page, I get

<div class="input-group dbdp">
  <input type="text" value="2022-11-15" class="form-control" required="" id="id_from_date" data-dbdp-config='{"variant":"date","backend_date_format":"YYYY-MM-DD","options":{"format":"DD.MM.YYYY","locale":"de"}}' data-dbdp-debug="" data-name="from_date">
  <div class="input-group-addon input-group-append input-group-text">
    <i class="bi-calendar"></i>
  </div>
</div>
<input type="hidden" name="from_date" value="2022-11-15">

and the widget shows "15.11.2022" as expected.

But after reload (F5) I get

<div class="input-group dbdp">
  <input type="text" value="2022-11-15" class="form-control" required="" id="id_from_date" data-dbdp-config='{"variant":"date","backend_date_format":"YYYY-MM-DD","options":{"format":"DD.MM.YYYY","locale":"de"}}' data-dbdp-debug="" data-name="from_date">
  <div class="input-group-addon input-group-append input-group-text">
    <i class="bi-calendar"></i>
  </div>
</div>
<input type="hidden" name="from_date" value="15.11.2022">

the hidden input changes and the widget displays "20.11.2015"

After anew reload the hidden input shows

<input type="hidden" name="from_date" value="20.11.2015">

and the widget shows "20.11.2020".

After anew reload the hidden input shows

<input type="hidden" name="from_date" value="20.11.2020">

and the widget shows "20.11.2020".

Somehow the year/century and the day get switched during reload. If I send a post request with with this widget, the date is still 2023-11-15, only the displayed date seems to be wrong.

To Reproduce
Steps to reproduce the behavior:

1. Create custom
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Console errors

• No error on django console.
• Mutations-Ereignisse sollten nicht mehr verwendet werden. Verwenden Sie MutationObserver stattdessen.
  english:
  Mutation-Events should not be used anymore. Use MutationObserver instead.

Setup Information (please complete the following information):

• OS: Linux TuxedoOS (Ubuntu, KDE)
• Browser: FireFox
• Browser version: 119.0.1 (64-bit)
• Python version: 3.10.13
• Django version: 4.2.7
• Bootstrap version: v5.3.0-alpha1
• jQuery version: v3.6.0

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

[configuration_page]: https://monim67.github.io/django-bootstrap-datepicker-plus/configure/ -> PAGE NOT FOUND
[troubleshooting_page]: https://django-bootstrap-datepicker-plus.readthedocs.io/en/latest/Troubleshooting.html

[H4rryK4ne]

It seems to be a problem with Firefox, as it does not appear in Chromium.

[thevvalverde]

Same problem with format DD/MM/YYYY. Only happens on Firefox, haven't found a solution yet. I'm gonna try to always send the data for the form in the form_kwargs["initial"], will report later.

[thevvalverde]

Update for anyone facing this problem: adding attrs={"autocomplete": "off"}, whether on the fields in the form or in the settings, solves it. It prevents the browser from attempting to preserve user data on a soft-refresh, so the widget does not bug out when the format is different from the backend_date_format