jplist-es6
jplist-es6 copied to clipboard
date & date range
I'm missing the date filters of the old jQuery jplist. Is it planned to integrate a such function? :)
Yes, it's in the roadmap.
In the old jQuery version it was necessary to enter a data range for the filter to become active. I'd appreciate, if only "from" is specified, all elements are displayed after this date. And vice versa, if only "to" is specified.
Actually, the new version is not based on jQuery and jQuery UI. The date picker of the previous version is part of jQuery UI, and I don't want to include a control that is based on it. I'm thinking of creating just an API that allows filtering by date, but I'm not sure if it will be useful for most users.
In light of the comments above and whilst it would not function as a range selector, a date selector 'text filter control' finding a match on the resulting string from a date selected, would facilitate my needs in this area.
At the moment, I'm piling all my dates relating to my product into one class and requesting the date via the 'text-box filter control' to achieve this, which is obviously not ideal.
I like holding multiple dates in one class, but a date selector to improve the user experience and accuracy of the date entered would be a great alternative whilst a more complex control is being considered. (Not sure I have the knowledge to implement the API mentioned)
Thanks
Hi
May I ask if any further thoughts came from the comments above? ....
How are you looking to proceed? My sites are for the Travel sector, so the ability to specify a date range would be very useful.
Many thanks.
I think I should add possibility to combine other plugins like datepicker with jplist. It may take some time to design and properly implement this. But for now you may consider the following approach: https://codepen.io/1rosehip/pen/mzJpoN
Hi - this looks a great suggestion to take forward.
Its a similar approach to what I'm taking, however add the date selector which is great.
Given the volume of different dates on offer, I'm currently placing multiple dates into the lookup class, comma separated as follows:
<div data-jplist-item>
<div class="name">10/10/2018, 15/11/2018, 16/12/2018</div>
</div>
Are you able to offer a codepen that splits and filters out dates that do not match? - Or is that getting too complex?
Thanks
I think the same codepen that I created should work.
In the scenario I've described;
If I have a list as follows:
<!-- Travel Product 1 -->
<div data-jplist-item>
<div class="name">12/10/2018</div>
</div>
<!-- Travel Product 2 -->
<div data-jplist-item>
<div class="name">01/11/2018, 10/10/2018</div>
</div>
<!-- Travel Product 3 -->
<div data-jplist-item>
<div class="name">10/10/2018, 12/12/2018, 05/05/2019</div>
</div>
and conduct a search for the date of: 05/05/2019
The following full line is filtered:
10/10/2018, 12/12/2018, 05/05/2019
Whereas I'm looking to only show the specified date .... 05/05/2019
Thanks
I guess you may add additional span tags around the dates and configure the filter to work with SPANs and not with DIVs.
<div data-jplist-item>
<div class="name">
<span class="date">10/10/2018</span>, <span class="date">12/12/2018</span>, <span class="date">05/05/2019</span></div>
</div>
<input
id="textbox-filter"
data-jplist-control="textbox-filter"
data-group="group1"
data-name="my-filter-1"
data-path=".date"
......
Great idea, but unfortunately it doesn't seem to work with your custom script provided in the Pen above or with jplist in general.
https://codepen.io/shane104/pen/BqNbZx
Note sure if there is something I'm missing or doing incorrectly.
Yes, you are right, it wont work. I don't think it may be achieved easily with the current state of the plugin. Maybe it can be done using https://www.jplist.org/documentation/api/jplist-state-event but it won't be easy / stable.
Is there an ETA on the date filtering? Even the ability for the existing range filter to accept dates.