1

I'm trying to use yadcf plugin using bootstrap datetimepicker for filtering dates in my datatable.

enter image description here

The date picker is only visible when ScrollX is set to false. when set to true, the horizontal scrollbar appears then date picker is hidden behind the data rows.

enter image description here

i tried to set position:relative in .bootstrap-datetimepicker-widget class. it is visible after setting it but textbox height is changing and date picker alignment issues occurring as below.

enter image description here

Any suggestions or pointers to resolve these issues?

Mario Nikolaus
  • 2,346
  • 1
  • 21
  • 28
umamaheswar.cs
  • 21
  • 1
  • 4
  • does it work well with jquery datepicker? – Daniel Feb 19 '18 at 12:29
  • I didn't try with jquery date picker as I use bootstrap CSS for my data table and would like to use bootstrap datetimepicker. – umamaheswar.cs Feb 21 '18 at 08:33
  • I will try to finish the integration of another bootstrap date-picker, hope it will resolve it https://github.com/vedmack/yadcf/issues/435 stay tuned – Daniel Feb 21 '18 at 09:00
  • try the latest [yadcf beta](https://github.com/vedmack/yadcf/blob/fa56e7d2c399cb4b12e2459df25063b1e7850e23/src/jquery.dataTables.yadcf.js) and use the following date picker plugin https://github.com/uxsolutions/bootstrap-datepicker – Daniel Feb 21 '18 at 15:50
  • Thank you very much Daniel for the updated plugin. The datepicker is showing now when ScrollX set to true. I modified yadcf plugin(Line:1773) from $("#" + dateId).datepicker({}); to $("#" + dateId).datepicker(datepickerObj); as i need to set datepicker options and it worked after this change. – umamaheswar.cs Feb 22 '18 at 14:50
  • I have observed the following 1) Previously, on selection of date on date picker the search filter triggers and shows the matches(rows) but looks like now it is not happening. 2) Date pickers are shown multiple. In other words, on focus out the current date picker is still shown. Could you please let me know if i missed anything or provide some pointers on how to resolve these? – umamaheswar.cs Feb 22 '18 at 14:50
  • More clarification on second point - 2) Date picker is still shown on click of another input filed. In other words, without the selection of date on first date picker, i clicked on another input field the first date picker is still shown along with second date picker. – umamaheswar.cs Feb 22 '18 at 15:05
  • fixed some in 0.9.3.beta.7 , please open an issue on github + provide a test page for remaining issues – Daniel Feb 22 '18 at 21:41
  • I have created an issue for #1 point https://github.com/vedmack/yadcf/issues/441 – umamaheswar.cs Feb 23 '18 at 09:19
  • I have created an issue #2 point https://github.com/vedmack/yadcf/issues/442 – umamaheswar.cs Feb 23 '18 at 09:50
  • Created Test page for 441 and 442 issues http://jsfiddle.net/umamaheswarcs/UvjnT/2975/ – umamaheswar.cs Feb 24 '18 at 08:50
  • Hi Daniel, it took me sometime for test page creation as i'm new to jsfiddle. sorry for the delay. – umamaheswar.cs Mar 04 '18 at 06:33
  • Hi, you test page were ok, I fixed/closed on of your issues and only one left to be fixed "Date picker is still shown on click of another input filed" if something is not clear/works for you let me know – Daniel Mar 04 '18 at 07:26

1 Answers1

0

Use the yadcf 0.9.3.beta.7 version with a similar setup

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

and add the uxsolutions/bootstrap-datepicker plugin to your web app

Daniel
  • 36,833
  • 10
  • 119
  • 200