Search code examples
angulardatepickerjquery-ui-datepickerbootstrap-datepickeryadcf

YADCF bootstrap datepicker support

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?

Solution

  • 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)