Bootstrap 5 styling for date picker

ajmcgrail

Hello all, not sure if maybe I have something wrong in my CSS but this is what the date picker looks like when filtering:

Does anyone know if there's a bootstrap 5 styling for the date picker? Or is there just something weird with my CSS? Thanks!

kthorngren

This SearchBuilder BS 5 example is working. Make sure you have all the correct Datatables Bootstrap 5 integration files. Use the Download Builder to get the proper files. If you still have issues then post a link to a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ajmcgrail

Hey there Kevin. I'm not sure I do have all the correct bootstrap 5 integration files, as I'm currently dealing with errors trying to instantiate it in the stackblitz which can be found here https://stackblitz.com/edit/datatables-net-vue3-simple-1npjey?file=src%2FApp.vue.

I'm using the Vue wrapper, which means that unfortunately I do not use the download builder. But if you or someone else is able to show me how to get the styling to work in the stackblitz, I think I could adapt it to my own project.

Andrew

allan

Hi Andrew,

Thanks for the link, but it doesn't appear to actually run? That said, I looked through the code and I don't see where you are importing the CSS for datetime (or indeed DataTables core or any of the other extensions)?

I would normally expect:

@import 'datatables.net-bs5';
@import 'datatables.net-datetime';
// etc

In the CSS. It looks like you must have it for SearchBuilder at least, but I don't see it in the example.

Allan

ajmcgrail

Hi Allan,

I've created another stackblitz, which can be found here: https://stackblitz.com/edit/datatables-net-vue3-simple-1npjey?file=src%2FApp.vue

I'm also getting the error 'DataTables warning: table id=DataTables_Table_0 - Unknown feature: searchBuilder', which I'm almost certain I haven't gotten before with this same setup. In fact, I'm actually using a stackblitz from here https://github.com/DataTables/Vue/issues/40 as the basis, and I don't think I had this error on that stackblitz.

Do you have a working stackblitz that implements/uses bs5 searchbuilder/buttons/datetime with Vue?

Thanks for your time!

allan

Here we go.

It took me an embarrassingly long time to realise the package.json was causing multiple versions of DataTables to be loaded in, including a copy of v1!

I'd suggest cleaning the datatables.net* packages in your package.json to refer to the most up to date packages only, and only the ones you need. Then delete node_modules, reinstall and hopefully then things should make more sense!

Allan

ajmcgrail

Hey there Allan, I really appreciate it! I'm going to look into that now that I have a known good working stackblitz, but I'll go ahead and consider this answered!