Skip to content

Support all Flatpickr actions on input group elements?Β #67

@ansonhoyt

Description

@ansonhoyt

Flatpickr can parse an input group of elements, as in their example flatpickr + external elements.

Flatpickr also binds click handlers for any elements in the input group that with the data-attributes: data-open, data-close, data-toggle, data-clear

I'd like to have a Bootstrap input-group with a (Font Awesome) icon toggle element:

<%= tag.div class: 'input-group', data: { controller: 'flatpickr' } do %>
  <%= form.text_field :held_on, class: 'form-control', data: { target: 'flatpickr.instance' } %>
  <%= tag.span class: 'input-group-append add-on', data: { target: 'flatpickr.toggle' } do %>
    <%= tag.span(icon('fas', 'calendar-alt'), class: 'input-group-text') %>
  <% end %>
<% end %>

I see input-group can be used since #35 added an instance target. However, I don't see any other targets. It doesn't look like stimulus-flatpickr supports an element in the group firing these built-in Flatpickr handlers.

Is this something you would be open to adding or accepting a PR for?

If so, does adding targets that mirror Flatpickr (toggle, open, close, clear) seem like the right approach? That would replicate Flatpickr's data-toggle behavior if the target data-target="flatpickr.toggle" exists.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions