How to use the date range picker in a dropdown

Wappler General How To
#1

I have a table where I allow the user to click an icon in the column to filter that column. I have a column that allow filtering with a search bar and another with a toggle. I want to create another filter with date range picker but I have an issue:

  1. I expand the dropdown menu
  2. I click on the date range picker input to show the calendar
  3. I click on the left arrow to go to the previous month (the dropdown menu disappear)
  4. I select a date range, as soon as I click to select the end date the picker move to top right corner of the page (I think it’s because the dropdown menu is not there anymore and the picker doesn’t “know” where he should be)

Is there an option or something to do fix that? Prevent click event to propagate and close the dropdown menu maybe?

#2

Something like that should work. There are modifiers in Wappler click event etc for this.
For date picker specifically, I think you will have to use js.

1 Like
#3

Do you know what to do? Call stop propagation on the onclick of a specific div children of the dropdown item and parent of the picker maybe?

#4

I will have test it out to find the exact solution. On mobile right now.
Try playing with the input element which is marked as date picker?

1 Like
#5

If I stop propagation in dev console at datapicker level it work but I don’t know how to hook that since it’s created at the bottom of at runtime:

image
image779Ă—78 4.21 KB

#6

So the dropdown does not close when you click the input field to generate picker… But it does close when clicking anywhere in the calendar?

1 Like
#7

Well not exactly, it close after following specific scenario: clicking on left or right arrow to navigate month by month. I think it’s because the first time I click an arrow it close the menu, then if I click on anything the picker will try to recaculate where it should be but since the menu is no there anymore it bind itself to the body.

#8

Ok. Since it does not close on click of the input where the picker draws itself, you can use JS there.
On onclick event of input, set a timer for few ms. On callback, try to find and select the datetime picker like you have done in console.
Then, you can set prevent/stop on it.

#9

Thank you, I would have prefer a more clean solution but I guess there is not :’(

#10

I have not played around with bootstrap down a lot. Maybe there would be a better solution.
That said, you could also think of a better UI since drop down’s purpose is to show selectable options, or switch button from what I understand.
For a more complicate input, like the date picker, a different UI could be better.

1 Like
#11

I’ve just removed the dropdown since for now at least there is only one item and I don’t need to display the input:

<button id="dropdown_response_created_at" class="btn icon-only" type="button" dmx-on:click="'click(\'input_response_created_at\')'">
  <i class="fas fa-filter"></i>
  <input id="input_response_created_at" name="input_response_created_at" is="dmx-date-range-picker" dmx-bind:applylabel="'button.apply'.t()" dmx-bind:cancellabel="'button.cancel'.t()" format="ll" unlinked="true" dmx-on:updated="query.set('response_created_at_start', start); query.set('response_created_at_end', end)" showdropdowns="true">
</button>

style.css:

button > input {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
}

image

2 Likes