How to use HTML date type with Django and HTMX

I am trying to get date from a picker and trigger an hx-get when the date is changed. The code below produces and text input field with a datepicker pop up. When I pop up the datepicker and change the date, the hx-get is not triggered. If I then click in the text input area the hx-get is triggered with the picked date. So how do I get the trigger to activate when I select the date from the picker?

I tried both the TextInput and DAteInput widgets but they both act the same way. I played a bit with django-bootstrap-datepicker-plus but found it did not work well with my forms which use both HTMX and Crispy forms helper layouts.

Thanks

    datedue = forms.DateField(initial=timezone.now().date(),
                              label="On or before",
                              widget=forms.TextInput(attrs={'type': 'date',
                                    'hx-get': reverse_lazy('change-priority'),
                                    'hx-target': '#tasklist',
                                    'hx-include': '[name="priority"], [name="status"],[name="assigned"], [name="iscomplete"]',
                                    'hx-trigger': 'click change'
                                    })
                                )

You need to separate the events with a comma.

datedue = forms.DateField(initial=timezone.now().date(),
                          label="On or before",
                          widget=forms.TextInput(attrs={'type': 'date',
                                'hx-get': reverse_lazy('change-priority'),
                                'hx-target': '#tasklist',
                                'hx-include': '[name="priority"], [name="status"],[name="assigned"], [name="iscomplete"]',
                                'hx-trigger': 'click, change'
                                })
                            )

The space separator is used for event modifiers, e.g. change delay:1s.

Back to Top