Click here to Skip to main content
14,874,484 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello everyone!

I have a form where I use an open source datetime picker, which works with Bootstrap 3, but I use bootstrap 5 for the rest of the website. When I integrate the form with the datetime picker, the style of the whole page becomes messed up.

Is there a way to limit application of Bootstrap to that one form? Or maybe there is another workaround to preserve the style of the website and to use that datetime picker?

I know, this question was posted here before quite a long time ago, and the solution was to use scoped style. Unfortunately, it is not supported by most browsers.

Maybe you know some datetime picker on Bootstrap 5? Unfortunately, I couldn't find any.

Any ideas and suggestions are appreciated!

What I have tried:

I already place
<?php require file and echo the form; ?>
in the div, where the form should be.

I have tried to place bootstrap 3 stylesheet above the one with Bootstrap 5, and removed it from . It preserved the style of the website, but the datetime picker didn't work anymore.

I have tried to restyle the classes in Bootstrap 3, but then some of the features in the datetime picker stop working.
Posted
Updated 6-Apr-21 2:40am

1 solution

You can't mix two versions of Bootstrap in the same page. If you really need a datetime picker, you'll need to find one which supports your chosen version of Bootstrap.

Since Bootstrap 5 is still in beta, you might struggle to find one that works with that version. The one I've used with Bootstrap 4 is:
GitHub - Eonasdan/tempus-dominus: A powerful Date/time picker widget.[^]

But bear in mind that most browsers now support the date and time input types, so you may not need a picker at all:
<input type="date"> - HTML: HyperText Markup Language | MDN[^]
<input type="time"> - HTML: HyperText Markup Language | MDN[^]
   
Comments
InnaTS 7-Apr-21 12:52pm
   
Thank you Richard! You confirmed my suspicions. It looks like it's the same datetime picker I've used, but newer version. :) I like the way DT picker based on Bootstrap 3 looks better, but I'll have to use the newest version of it, no way around it. I'll try to restyle it a little. Thanks again for your time and input! :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900