prevent DateTimePicker's CSS overriding

Question

I spent a lot of time searching for a good datetimepicker (unfortunately jquery offers only a datepicker). I am trying to use http://tarruda.github.io/bootstrap-datetimepicker/ in my webpage, but it overrides my css and I failed while trying to "scope" it. Could you help me out?

EDIT: here's the code which overrides my css:

    <!DOCTYPE HTML>
<html>
  <head>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
  </head>
  <body>

    <div id="datetimepicker" class="input-append date">
      <input type="text"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>

    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });
    </script>
  </body>
<html>

And here https://github.com/tarruda/bootstrap-datetimepicker there are some less file, but unfortunately I never used LESS (and I'm not a css expert) and I really don't know how to limit twitter-bootstrap and bootstrap-datetimepicker to div "datetimepicker".

What I have to do?

I don't think somebody can help you if you don't provide the actual code that has the problem and the expected output. — Agis, Aug 07 '13 at 07:35
Check this link for more http://stackoverflow.com/questions/9705381/css-files-and-unwanted-overriding — AnaMaria, Aug 07 '13 at 07:38
@SomeshMukherjee I've added some code to the first post, thanks in advance @ AnaMaria I read !important is a bad practice, and I really never used LESS before. I'm really surprised there's no way to make a
or a use one different css without affecting the entire page. I found out something similar have been added in html5 http://css-tricks.com/saving-the-day-with-scoped-css/, but it's really bad supported even by modern browsers — user2659656, Aug 07 '13 at 10:50

score 1 · Answer 1 · edited Oct 04 '13 at 05:00

You've probably already found another way to solve this, but for those who are still trying to use this plugin...

Firstly, as said, the booltrap is necessary!

The boolstrap already has a datepicker styled and I was able to use it.

For this, I downloaded the zip available in http://tarruda.github.io/bootstrap-datetimepicker/

There is a bootstrap-datetimepicker.min.css in it.

What I did was, instead of calling this css, create a new (datetimepicker.css) and in this new file, I copied the css contained in tarruda's .min.css

At the end of the code, I copied the boolstrap's datepicker css (datepicker.css)

I know it is not the best practice in the world, but it worked and for a tight deadline, this can be a help ..

score 0 · Answer 2 · edited May 23 '17 at 12:09

The plugin that you are using is a bootstrap plugin. It requires you to use bootstrap which is a css framework. Bootstrap stylizes certain elements and comes with its own set of styles. You cannot use this plugin without twitter bootstrap (Twitter bootstrap is overriding your css)

This plugin will not work without bootstrap, so I am afraid you'll have to find another one. Try using a jquery UI plugin. Those things generally don't add scaffolding code. Search for jquery UI timepicker.

Can you scope Bootstrap? Yes. you need to learn a little bit of LESS. See this answer Limit the scope of bootstrap styles I could do it for a couple of dollars if you have some:P kidding

its easier to just get another plugin. You can also life those parts of bootstrap that you need.

It's a pity, I really liked this widget. Thanks a lot for your help! — user2659656, Aug 07 '13 at 11:37

prevent DateTimePicker's CSS overriding

2 Answers2