1

Currently we're implementing yadcf to filter through the datatable. So far everything works fine but we're facing an issue with the date(time)picker for filter_type date/range_date.

We consider the jQuery-ui datepicker not user friendly because you can only cycle through months. So in order to go back a couple of years it takes quite some clicks to reach the desired date(I know you can manually change the year by typing in it in there yourself but we consider that also not user friendly).

The other option we read about in the documentation is that it has support for eonasdan-bootstrap-datetimepicker. At first we didn't like the timepicker part but we gave it a shot anyway. So I've installed the following modules:

  • Moment.js (yarn add moment)
  • eonasdan-bootstrap-datetimepicker (yarn add eonasdan-bootstrap-datetimepicker)

The new datetimepicker is correctly loaded but this adds new problems:

  1. Once you've clicked the date, the date is not properly formatted (it somehow shows {Hour (also shows values beyond 23)}/{Day abbrevation (like Th for Thursday)}/yyyy (not even the actual year number). Even setting date_format (to for example yyyy/mm/dd) doesn't affect the output.
  2. The styling of the decade picker(example 2000-2011/2012-2023/etc) is not great(not that much of a problem since we could just remove the css and write it ourselves but it's sort of annoying that the css that comes with the package is not working properly)..
  3. The styling of the day picker(1-31) does not stick within the calendar wrapper (not much of a problem since we could just remove the css and write it ourselves but it's sort of annoying that the css that comes with the package is not working properly).
  4. The hour picker only shows one big number that you can select so it's kinda useless(maybe a CSS problem but once again it is annoying that the css that comes with the package is not working properly).

So overall, it is even worse than jquery-ui-datepicker.

I've tried installing several other bootstrap date(time)picker but they don't work properly(some issues were that they wouldn't actually trigger on clicking the input field, not automatically(or being able to close at all) closing when you select the last part(day), not passing the date to the input field.

Versions we use are:

So my question is, does anyone know (how to setup)a decent datepicker(or datetimepicker if there is no other option) to use in the YADCF filters?

Reflexecute
  • 271
  • 4
  • 14
  • One example of packages that I tried is: https://yarnpkg.com/en/package/bootstrap-datepicker This one looks good, the data get filled into the input field but the datepicker doesn't close automatically(and can't be closed at all), and once you click in the top bar to go to the month picker(jan - dec) it stops responding to all clicks. And most important, after clicking the day there is no request sent to the backend. – Reflexecute Aug 16 '17 at 16:07
  • 1
    take a look at the showcase http://yadcf-showcase.appspot.com/dom_bootstrap.html and http://yadcf-showcase.appspot.com/dom_bootstrap_time.html (source code in the showcase repo on github) maybe that will help, if not please provide a link to your test case – Daniel Aug 20 '17 at 06:32
  • Sorry for my late response, I went on vacation for a week. I've managed to add the datetimepicker from eonasdan and it's working correctly now. I noticed I made a mistake in the date_format last time I've tried it(yyyy/mm/dd -> YYYY/MM/DD). – Reflexecute Aug 29 '17 at 14:02

1 Answers1

1

You should use the Eonasdan/bootstrap-datetimepicker, Take a look at the showcase yadcf-showcase.appspot.com/dom_bootstrap.html and yadcf-showcase.appspot.com/dom_bootstrap_time.html (source code in the showcase repo on github)

Daniel
  • 36,833
  • 10
  • 119
  • 200