将 bootstrap-datepicker 与 HTMX 结合使用

Question

我正在尝试将 bootstrap-datepicker 与 HTMX 一起使用。

在更改日期时，我想使用日期作为 hx-post 的参数，但我不知道如何处理这个问题。

我有一个带有工作引导日期选择器的 JSFiddle，并尝试在

/dateurl

 事件上发布到 

changeDate，其值为

getDate

方法。

我还接近吗？我试图使用 htmx 网站上的 sortable 示例作为起点。我想我不明白当事件触发时如何实际做某事。

任何帮助将不胜感激。

Answer 1

谢谢你的jsfiddle，这样玩起来很容易。

我找到了这个解决方案。

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

不太好，事件需要手动调度。也许有更好的解决方案。但对我来说，如果没有

onchange

属性，它就不起作用。

Answer 2

看起来 bootstrap-datepicker 没有传播它的事件。可能是因为事件名称没有以任何方式命名，因此具有通用名称的事件（例如“隐藏”）会导致其他页面元素出现问题。

我的解决方案是向直接调用 htmx.trigger 的日期选择器添加一个事件处理程序。

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

然后在你的元素上：

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