jplist-es6 icon indicating copy to clipboard operation
jplist-es6 copied to clipboard

date & date range

Open t40 opened this issue 6 years ago • 13 comments

I'm missing the date filters of the old jQuery jplist. Is it planned to integrate a such function? :)

t40 avatar Aug 29 '18 10:08 t40

Yes, it's in the roadmap.

1rosehip avatar Aug 29 '18 20:08 1rosehip

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.

t40 avatar Aug 30 '18 06:08 t40

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.

1rosehip avatar Sep 02 '18 07:09 1rosehip

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

shane147 avatar Sep 03 '18 07:09 shane147

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.

shane147 avatar Oct 01 '18 08:10 shane147

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

1rosehip avatar Oct 01 '18 11:10 1rosehip

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

shane147 avatar Oct 01 '18 11:10 shane147

I think the same codepen that I created should work.

1rosehip avatar Oct 01 '18 14:10 1rosehip

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

shane147 avatar Oct 01 '18 14:10 shane147

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"
         ......

1rosehip avatar Oct 01 '18 14:10 1rosehip

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.

shane147 avatar Oct 01 '18 16:10 shane147

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.

1rosehip avatar Oct 01 '18 16:10 1rosehip

Is there an ETA on the date filtering? Even the ability for the existing range filter to accept dates.

mmc501 avatar Nov 27 '18 12:11 mmc501