HTMX 未触发对 pickadate.js 选择的正确查询答案

【问题标题】：HTMX not triggering correct query on pickadate.js selectionHTMX 未触发对 pickadate.js 选择的正确查询
【发布时间】：2022-11-02 08:12:35
【问题描述】：

我使用django-forms-dynamic 包和htmx 在MultipleChoiceField 上动态加载可用选项。这些选项基于日期字段，为此我使用 Amsul 的 pickadate.js。

初始查询从数据库中获得正确的选择。但是，如果更改日期，则查询会落后一步。因此，假设最初选择了 1.11.2022。如果更改为 4.11.2022，则查询 1.11.2022。如果选择28.11.2022，则查询1.11.2022等。

预订表格.html

<div class="col-lg-6">
  <div class="form-floating">
    {% render_field reservation_form.date class="datepicker form-control mb-3" 
           hx-get="/reservation/filter-seats" 
           hx-include="#id_dinner" 
           hx-trigger="click change" 
           hx-target="#id_seat_reservation" 
    %}
    <label for="id_date">Dinner Date</label>
  </div>


  <div class="form-floating">
    {% render_field reservation_form.amount_guests class+="form-control" placeholder="" %}
    <label for="id_amount_guests">Guests</label>
  </div>

  <div class="visually-hidden">
    {% render_field reservation_form.dinner %}
  </div>

  <div class="form-check">
    {% render_field reservation_form.seat_reservation class+="form-select" %}
    <label for="id_seat_reservation">Select Seats</label>
  </div>
</div>

挑选脚本

<script>
    var $input = $('.datepicker').pickadate({
                        format: 'yyyy-mm-dd',
                        formatSubmit: 'yyyy-mm-dd',
                        min: 0,
                        max: 90,
                        disable: {{ blocked_dates }},
                        firstDay: 1,
                    })

    var picker = $input.pickadate('picker')
</script>

我错过了什么？

【问题讨论】：

标签： django htmx pickadate

【解决方案1】：

您已将触发器设置为hx-trigger="click change"。首先，这是不正确的，您必须用逗号分隔事件，现在 HTMX 尝试将 change 评估为触发器修饰符但没有成功。因此，您只有click 触发事件，HTMX 在您单击输入元素时提交表单。同时pickadate.js 也监听点击事件并打开datepicker 小部件。选择日期后，表单会发送 change 事件，但您已为 HTMX 禁用该日期，因此它不会再次提交表单。下次您单击输入元素时，HTMX 会使用先前选择的值提交表单。

要解决此问题，只需删除 hx-trigger 属性。对于输入字段default trigger is already the change event，因此当pickadate.js 在输入字段中输入所选日期时，HTMX 将提交表单。

【讨论】：