5

I am using django-bootstrap-datepicker-plus package, and I am trying to display an alert when the date is changed. However, jquery does not seem to detect any changes to the date.

Following this question Detect change to selected date with bootstrap-datepicker only works when I add the JQuery UI CDN to my code, which causes a problem as two datepickers appear. Is there a way to get JQuery to detect a change in django-bootstrap-datepicker without adding JQuery UI code?

forms.py

from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput

class ExampleForm(forms.Form):
    DOB = forms.DateField(required=False, label="Date of Birth",
                input_formats=['%d/%m/%Y'],
        widget=DatePickerInput(format='%d/%m/%Y')
    )

Html

 <div class="col-12 col-md-6 mb-0 p-1">
      {{ form.DOB|as_crispy_field }}
    </div>

Rendered HTML Rendered HTML

Nick
  • 223
  • 2
  • 11
  • 1
    It is bootstrap datetimepicker, not the one from jQueryUI. To listen to this changes, you need to handle `dp.change` event, smth like `$('#id_DOB').on('dp.change', ev => myHandler(ev));`. See [ref](https://getdatepicker.com/4/Events/) – STerliakov Oct 22 '22 at 00:50
  • Thanks mate, worked. Want to add it as the answer? – Nick Oct 22 '22 at 01:59

1 Answers1

1

There is a lot of JS packages with similar [date,time]picker functionality. django-bootstrap-datepicker-plus uses eonasdan picker, according to the docs. They use different event names. Eonasdan implementation prefixes all events with dp. namespace, as stated here, so the following should work:

$('#id_DOB').on('dp.change', ev => myHandler(ev));
STerliakov
  • 4,983
  • 3
  • 15
  • 37