Question

我花了很多时间寻找一个好的datetimepicker（不幸的是jquery只提供了一个datepicker）。我正在尝试在我的网页中使用http://tarruda.github.io/bootstrap-datetimepicker/，但它会覆盖我的CSS并且在尝试“范围”时失败了。你能救我一下吗？

编辑：这是覆盖我的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>

这里https://github.com/tarruda/bootstrap-datetimepicker有一些文件较少，但不幸的是我从未使用过LESS（而且我不是css专家）而且我真的不知道如何限制twitter-bootstrap和bootstrap-datetimepicker div“datetimepicker”。

我必须做什么？

Answer 1

您可能已经找到了解决此问题的另一种方法，但对于仍在尝试使用此插件的人来说......

首先，如上所述，booltrap是必要的！

boolstrap已经有一个datepicker样式，我能够使用它。

为此，我下载了http://tarruda.github.io/bootstrap-datetimepicker/

中提供的zip

其中有一个bootstrap-datetimepicker.min.css。

我所做的不是调用这个css，而是创建一个新的（datetimepicker.css），在这个新文件中，我复制了tarruda的.min.css中包含的css

在代码的最后，我复制了boolstrap的datepicker css（datepicker.css）

我知道这不是世界上最好的做法，但是它有效并且在紧迫的期限内，这可以帮助..

Answer 2

您使用的插件是一个bootstrap插件。它需要你使用bootstrap，它是一个css框架。 Bootstrap样式化某些元素并具有自己的一组样式。没有twitter bootstrap你不能使用这个插件（Twitter bootstrap覆盖你的css）

如果没有bootstrap，这个插件将无法运行，所以我担心你必须找到另一个。尝试使用jquery UI插件。这些东西通常不会添加脚手架代码。搜索jquery UI timepicker。

你可以研究Bootstrap的范围吗？是。你需要学习一点点。看到这个答案Limit the scope of bootstrap styles 如果你有一些，我可以花几美元来做这件事：P开玩笑

更容易获得另一个插件。您还可以生活所需的引导程序部分。

防止DateTimePicker的CSS覆盖

2 个答案: