Bootstrap Date range plugin suggestion

[lenamtl]

Hi,

Like a lot of dev I'm using this script for all my datepicker
https://github.com/uxsolutions/bootstrap-datepicker

I'm suggesting you to update to this one because it is more popular, have a better support and
because the one that you are using does not have a date range feature and does not a Bootstrap theme ....
https://github.com/Eonasdan/bootstrap-datetimepicker

Honestly, I'm not able to make it work with my actual code and the theme is not displaying....
Do you have a working demo with Bootstrap theme and date range with externally triggered filter?

Hope you will update it soon or someone have made a fork with this plugin.

[lenamtl]

No I have not.
I just don't know how to implement this with date range...
Does the date range code is independent from the actual datepicker plugin (is this in the Yadcf core)
Or I need to recreate the date range code and add the new plugin?

Sorry if it's not clear I don't know how to explain...

[vedmack]

Hi

Sorry for misleading you, I'll try to add support for this datepicker too

[lenamtl]

Any news on this?

[vedmack]

Added in 0.9.3.beta.6

Usage example:
(notice that you have to provide the different date format string for date picker plugin and for moment)

$('#example').dataTable().yadcf([{
    column_number: 4, 
    filter_type: "range_date", 
    datepicker_type: 'bootstrap-datepicker', 
    date_format: 'yyyy-mm-dd', 
    moment_date_format: 'YYYY-MM-DD'
}]);

[lenamtl]

Thanks I will try it and let your know

[lenamtl]

Hi,

I have some issues as the date are not filtering.

I'm wondering is this mandatory to use Moment.js because it is not required by Bootstrap-Datepicker?
If yes, is there a way not to use it or to make it as an option I never use moment with my calendar?

When using moment I'm getting nothing found even if date exist in daterange .

my code

yadcf.init(table15, [
{ column_number: 5, // due date
	//filter_container_id: '15_5',
	filter_type: "range_date", 
	datepicker_type: 'bootstrap-datepicker', 
	date_format: 'dd/mm/yyyy', 
	moment_date_format: 'DD/MM/YYYY',
	}, 
							
],

my td
<td data-order="2018-02-14" class="sorting_1">14/02/2018</td>

Where should I placed the additional options for the calendars ?
as using filter_plugin_options is not working...

Another issue is when clearing the date from the yadcf button the date is kept highlighted in the calendar. Enter a date, clear the field using the button open calendar to select a date the previous date is selected.

I was having an issue with savestate that is not always save the date to ... I will do more investigation on this.

Syntax adjustment needed if you use the date-range feature from the plugin (maybe you use 2 separate datepicker instead )
original syntax of the plugins as the fields are not responsive the way you set it.
Also this will help for the calendar position / orientation.
See sandbox select range https://uxsolutions.github.io/bootstrap-datepicker/

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start">
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end">
</div>

[vedmack]

@lenamtl please try the 0.9.3.beta.7 it should fix some of your issues, and please specify the remaining issues in a reply + provide a test page to speed things up

[lenamtl]

Hi, here is the results of my tests.

1. filter_plugin_options is now FIXED (I have not tested all options but those I tested was ok).

2. clearing the date using the Yadcf button, the date is kept highlighted in the calendar.
   To reproduce, select a date in calendar, clear the field using the Yadcf button,
   reopen calendar the previous date is still selected. BUG

2a) This is also happening when clearing the field with exResetAllFilters. BUG

2b) When clearing the date field manually using DEL the date is no more selected = GOOD

2c) Using the option clearBtn: true the date is no more selected = GOOD

3. The date are not filtered. (possible bug)
   If a select a range with date that are existing in the table it's display 'nothing found message'...
   **How can I set a Jsfiddle with the beta YADCF file?

4. Could you confirm that Moment.js is required or not?
   When using Moment.js (savestate is working fine)
   When not using Moment.js (savestate save only the date from)

5. The Bootstrap syntax is not there so the fields are not responsive. (nice to fix).
   original syntax for Bootstrap-Datepicker Daterange inputs

<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start">
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end">
</div>

Here is my adjustment for CSS

if (columnObj.datepicker_type === 'bootstrap-datepicker') {
   /* add input-group class */
   innerWrapperAdditionalClass = 'input-daterange input-group';
}

Replaced this

$(filter_selector_string).append("<input onkeydown=\"yadcf.preventDefaultForEnter(event);\" placeholder=\"" + filter_default_label[0] + "\" id=\"" + fromId + "\" class=\"yadcf-filter-range-date yadcf-filter-range yadcf-filter-range-start\" " + filterActionStr + "></input>");
   		$(filter_selector_string).append("<span class=\"yadcf-filter-range-date-seperator\" >" + "</span>");
   		$(filter_selector_string).append("<input onkeydown=\"yadcf.preventDefaultForEnter(event);\" placeholder=\"" + filter_default_label[1] + "\" id=\"" + toId + "\" class=\"yadcf-filter-range-date yadcf-filter-range yadcf-filter-range-end\" " + filterActionStr + "></input>"); 

with this

			$(filter_selector_string).append("<input onkeydown=\"yadcf.preventDefaultForEnter(event);\" placeholder=\"" + filter_default_label[0] + "\" id=\"" + fromId + "\" class=\" yadcf-filter-range yadcf-filter-range-start input-sm form-control\" " + filterActionStr + "></input>");
			
			$(filter_selector_string).append("<span class=\"input-group-addon\" >" + filter_default_label[1] + "</span>");
			
			$(filter_selector_string).append("<input onkeydown=\"yadcf.preventDefaultForEnter(event);\" placeholder=\"" + filter_default_label[1] + "\" id=\"" + toId + "\" class=\"yadcf-filter-range yadcf-filter-range-end input-sm form-control\" " + filterActionStr + "></input>");

How can I console-log the inputs? so I can make more investigation why it is not filtering..
Here is what I'm getting in my savestate
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"03/02/2018","to":"15/02/2018"}]}}

Thanks

[lenamtl]

Hi,
Did you have the time to check my results...

[vedmack]

@lenamtl I can confirm that Moment wont be needed, will try to publish a new beta that will fix some of the issue soon

[vedmack]

0.9.3.beta.9 supposed to fix some of the mentioned above issues and there is no need in Moment library any more, please post remaining issues as a reply here (but please specify only the BUGS so it will be easier for me to scan through it)

[lenamtl]

Hi,

1. Unfortunately the date are still not filtered correctly.

Could you tried this to see if this is working on your side.
also just to make sure are you using https://github.com/uxsolutions/bootstrap-datepicker

Let say I select range 01/02/2018 to 01/03/2018 and I have a date in the column that is 14/02/2018
it's display 'nothing found message' BUG

The TD
<td data-order="2018-02-14">14/02/2018</td>

Yadcf I'm using externally_triggered

{ column_number: 5, 
filter_container_id: '15_5',
filter_type: "range_date", 
datepicker_type: 'bootstrap-datepicker', 
date_format: 'dd/mm/yyyy', 
moment_date_format: 'DD/MM/YYYY',
filter_plugin_options: datepickerDefaults, 
filter_reset_button_text: false 
}, 

2. Template is not using Bootstrap syntax, see my previous post for the fix.

[vedmack]

@lenamtl it works for me ,

try the following setup
js:

$('#example').dataTable().yadcf([{
             column_number: 4, 
             filter_type: "range_date", 
             datepicker_type: 'bootstrap-datepicker', 
             date_format: 'yyyy-mm-dd'
    }]);

html:

<td>2015-05-07</td>

[lenamtl]

Unfortunately I can't use this format yyyy-mm-dd
I absolutely need to use this format dd/mm/yyyy
You know depending of the country / language, we may use different date format.

[vedmack]

Just try it to see if it works and let me know

…

On Mar 2, 2018 5:32 PM, "lenamtl" ***@***.***> wrote: Unfortunately I can't use this format yyyy-mm-dd I absolutely need to use this format dd/mm/yyyy You know depending of the country / language, we may use different date format. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#435 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABmiX1905uudS2cQpm8ZQ9MFa0CJA978ks5taWYBgaJpZM4RhaZT> .

[lenamtl]

Ok I found the problem it's not filtering when the TD have data-order=" "

<td data-order="2018-02-14" class="sorting_1">14/02/2018</td>

If I remove data-order it's filtering ok but I need it for the ordering system...

[vedmack]

@lenamtl try setting other format in the data order and try to see if the datepicker got some limitation on its date format

[lenamtl]

I will do more tests this week.

Also more complete tests should be done to check if Yadcf have issue with data-order=" " and other kind of data, not only date.

I saw some previous bugs on that topics...

[lenamtl]

Hi,

1. I have found a new problem, when deleting the date manually using DEL key (keyboard)
   it is not resetting the filter.
   To reproduce select a date range or only a date the data are filtered.
   Delete the date manually using the DEL key, now the table should be reset and it is not....It kept the latest date range result in the table...
   *When deleting the date manually it is not saving the new value to localstorage.
   BUG

Also when deleting the value with Datepicker clear button the value in Localstorage is not NULL
but show the object value {"from":"","to":""} that will be better if this is saving like NULL when both object are empty. This can also be easier to find out if a filter is applied for range.
Can this be possible to save it as NULL instead the empty object?

When clearing using the exResetAllFilters it is setting the value in Localstorage to NULL which is Good

2. I have tried different date format as date and data-order and if the TD is using data-order
   it's not filtering. If I remove the data-order it is filtering.
   The value is saved correctly in the localstorage
   Something is blocking the script to filter the result correctly.
   Similar to this Filter fails when using data-*  #425
   BUG

[lenamtl]

Any clue how to fix Bug no1?

[vedmack]

@lenamtl yes, keep on reporting in details on the issues , this clearly speeds (as possible) up the fixes

[vedmack]

@lenamtl should work in 0.9.3.beta.10

[lenamtl]

Hi,
Thanks a lot for No1 when clearing the date manually is fixed

A) Localstorage statesave issue always occurred
When deleting the date manually the value are not updated in localstorage.
I can still see the date from to
yadcfState":{"-users-list":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,{"from":"01/03/2018","to":"09/03/2018"}]
This need to show Null or at least empty ""

B) Localstorage statesave random issue
I did more investigation and there are some random bugs with savestate
the values are not updated in some case in the savestate
I'm not sure exactly what cause the issue but most of the time this is after resetting the table with
exResetAllFilters
or when one date is selected on two (From or To)...

This is a random issue so sometimes it saving sometimes not...
Problably something is not well save if only one date of the range is selected

[lenamtl]

Did you find what cause the problems?

[vedmack]

@lenamtl
maybe, pleases try adding the following line of code

saveStateSave(oTable, column_number, table_selector_jq_friendly, min, max);

below this line N#3223 and let me know how it works for you

[lenamtl]

Hi,

I have tested your line of code
Results:
when using clear button from the calendar (option clearBtn)
to clear the from date
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"","to":"2018-04-01T00:00:00.000Z"}]}}

when clearing the field manually Del key (the from is missing)
to clear the from date
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"to":"2018-04-01T00:00:00.000Z"}]}}

also the format is wrong as it is usually it get saved this way
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"01/03/2018","to":"24/03/2018"}

[lenamtl]

Let me know if there is something else to try as we are not on same timezone ;)

[vedmack]

if 0.9.3.beta.11 wont solve it please provide a jsfiddle that will reproduce the issue

[lenamtl]

Here is the list of the tests and bug I have found:
To recap:

1. When selecting only TO date is causing several problems and FROM date is not saved in Localstorage.
   (it's look like there is a problem because this have 2 values FROM and TO)
2. Delete TO manually change the FROM date format
3. When clearing date we can see different result we should always see the same result:
   null or "from":"","to":"" or "from":null,"to":null
   I'm pretty sure this is one cause of several bugs.
4. Yadcf reset button keep the date selected in the calendar view.

Updates: I did the same tests with the Eonasdan plugin to compare the results
I may be wrong but it's seems to confirm that when it is saved this way "from":"","to":"" after the next result that will be saved in localstorage will be wrong.

**Tests were performed in this order and we should pay attention to the results format:

Yadcf main reset button
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,null]}}

FROM date selected
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"14/03/2018","to":""}]}}

TO date selected
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"14/03/2018","to":"01/04/2018"}]}}

Yadcf main reset button
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,null]}}

FROM date selected
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"14/03/2018","to":""}]}}

FROM clear using Datepicker clear btn
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"","to":""}]}}

Select TO date BUG
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"","to":""}]}}

Select FROM date BUG
(now it save the TO which was previous step and not saving the FROM)
So it looks like every time I select TO date without selecting FROM date this bug happens.
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"","to":"01/04/2018"}]}}

Yadcf main reset button
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,null]}}
(And I can see a dates selected in the calendar view) BUG

Select FROM and TO dates
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"15/03/2018","to":"22/04/2018"}]}}

Delete TO manually (see it change the date format) BUG
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"2018-03-15T00:00:00.000Z","to":null}]}}

Delete FROM manually - I'm not sure if it suppose to be null or "from":"","to":"" or "from":null,"to":null but this must be consistent and it is not. Possible BUG
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":null,"to":null}]}}

Select From date BUG
"yadcfState":{"-allmytasks-list":[null,null,null,null,null,null]}}

[vedmack]

@lenamtl what do you mean by saying FROM clear using Datepicker clear btn ? can you provide a test page / code to show that clear button from the calendar?

[lenamtl]

this is a datepicker option clearBtn: true this is displaying a clear button on the calendar page view.

There is a demo / sandbox https://uxsolutions.github.io/bootstrap-datepicker/
select Range radio button,
then set clear button to enable on the page, this will generate a demo at the bottom of the page

[vedmack]

yadcf main reset button clears range date properly
'' will be used for empty filter (instead of null)

also please let me know how exactly you checking the "yadcfState" because I couldn't reproduce some of your bugs

[lenamtl]

Hi,
I'm checking localstorage values / savestate
I'm using Chrome

***Updates since I have updated to Chrome to to Version 65.0.3325.162
I'm still having some rare random issues that the value is not saved in Localstorage.
Unfortunately I have not found the trigger...

Is there any delay set when saving the filter to localstorage,
what are the triggers that save the from to to localstorage,
I need to understand your code to find out.

I will check if I can reproduce with Firefox.

When inspecting localstorage in console, sometimes the preview values does not get update but the localstorage values does, this may not related to the bug but I'm wondering how come it's updating quickly and sometimes it is not at all, this is strange....

For the confirmed bug let me know if you need more info, I can reproduce it all the time with all browser.
Thanks for your time

***Confirmed bug

1. Localstorage Date format get changed when deleting date manually
   I'm getting this BUG all the time
   Select a FROM and TO date using the calendar
   Clear / delete manually one of the date using DEL backspace key
   Result: the format of the other date will be modified
   "yadcfState":{"-allmytasks-list":[null,null,null,null,null,{"from":"","to":"2018-03-04T00:00:00.000Z"}]}
   date should be 04/03/2018

Refresh the page, 2018-03-04T00:00:00.000Z will be displayed in the date field instead of 04/03/2018

[vedmack]

fixed local storage date format issue in beta13, as to when I update yadcfState: I do it in range filters updates only because for non-range filters datatables updating the columns property in localstorage by itself while the range filters are not - so I had to do it myself...

for other bugs related to this integration please open a new issue (with your great test cases attached)

[lenamtl]

The format issue is fixed :)
Thanks a lot

[okliv]

I have date column data in this moment format: YYYY-MM-DD h:mm:ss and try to use bootstrap-datepicker plugin to filter within range_date filter_type:

{
filter_type: 'range_date',
datepicker_type: 'bootstrap-datepicker',
date_format: 'yyyy-mm-dd',
moment_date_format: 'YYYY-MM-DD h:mm:ss',
}

no luck. it filters everything or nothing depending on one exact from date 2019-11-29 (like, tomorrow?)

help 🙏

/*! Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)

* Yet Another DataTables Column Filter - (yadcf)
*
* File:        jquery.dataTables.yadcf.js
* Version:     0.9.4.beta.30
*
* Info:        https://github.com/vedmack/yadcf
*/

[vedmack]

@okliv please open a new issue with test page