CODEWITHSUNDEEP
posteventsbootstrap-datepickerhtmx
djangomachine
djangomachine

Reputation: 709

Using bootstrap-datepicker with HTMX

I am trying to use bootstrap-datepicker with HTMX.

On date change, I want to use the date as an argument with hx-post, but I have no idea how to approach this.

I have a JSFiddle with a working bootstrap-datepicker, and am trying to post to /dateurl on the changeDate event, with the value of getDate method.

Am I even close? I was trying to use the sortable example on the htmx site as a starting point. I guess I'm not understanding how to actually do something when the event fires.

Any help will be much appreciated.

Upvotes: 2

Views: 2171

Answers (2)

nakedfanatic
nakedfanatic

Reputation: 3178

It looks like bootstrap-datepicker doesn't propagate its events. Possibly because the event names weren't namespaced in any way, so events with generic names (such as "hide") were causing problems with other page elements.

My solution is to add an event handler to the datepicker which calls htmx.trigger directly.

$('.datepicker').on('changeDate', function(e) {
    htmx.trigger('#someHtmlElement', 'myChangeDateEvent')
})

And then on your element:

<div id="someHtmlElement" hx-trigger="myChangeDateEvent" hx-post="/myUrl" />

Upvotes: 2

guettli
guettli

Reputation: 27129

thank you for this jsfiddle, this way it was easy to play around.

I found this solution.

<input type="text" hx-trigger="change" hx-post="/dateurl"
       onchange="htmx.trigger(this, 'change')">

Not nice that the event needs to be dispatched manually. Maybe there is a better solution. But for me it did not work without the onchange attribute.

Upvotes: 4

Related Questions