Date range text boxes

[JG515]

We have implemented the itemsjs demo that uses a list of movies and altered it slightly to fit it to our particular aggregations. How can we add "start date" and "end date" text boxes to filter items by date range? Thanks so much!

[cigolpl]

Could you share a screenshot of your desired solution from UX standpoint ? I am asking because this could be done in various ways.

[JG515]

Thanks so much for getting back to us so quickly! Here is a screen shot with the kind of date range fields we would like to implement in our faceted search. We would like to do "Start Date" and "End Date" like below.

[JG515]

One of our goals for this week is to implement the date range search. We look forward to getting your guidance on the best way to accomplish it. Thanks again!

[cigolpl]

You can totally tackle this UI issue using the filter function. There's a great example you can check out right here: https://github.com/itemsapi/itemsjs/blob/master/docs/configuration.md.

Also, just a heads up, you can create faceted filters that would look something like this:

Years:
"2023" -> 100 movies
"2022" -> 50 movies
"2021" -> 120 movies

Tags:
"Drama" -> 200 movies
"Western" -> 50 movies

This is really where itemsjs comes into its own and shows off what it can do. Hope this helps!

[JG515]

How do we get the value of the text box into the filter function? It works when we hard code a number, but not when we try to get the value of the text box.

Please notice the number1 text box in the UI:

and how we tried to use it in the filter function:

full files attached

index.njk - Copy.txt
itemsjs-config.njk - Copy.txt

Thank you, Thank you!

[JG515]

Can we get a little help hooking up the text box in the UI to the itemsjs library? Not sure how to make this work.

[cigolpl]

We have several examples of this in our demo documentation, which you can find at https://github.com/itemsapi/itemsjs/blob/master/docs/demo.md. These examples include implementations using Vue and native JS, showing how to hook up a text box with ItemsJS. Please take a look and see if these examples help you solve your problem