我如何在已经使用引导库的同时添加 jquery ui 日期选择器?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15934063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:03:52  来源:igfitidea点击:

How do i add jquery ui date picker, while already working with bootstrap library?

jqueryhtmljquery-uitwitter-bootstrapdatepicker

提问by XT_Nova

I'm playing around with bootstrap and i was going to add a datepicker to the page using it, but without any success.. So i found the code for a datepicker, using query ui: Datepicker

我正在玩引导程序,我打算使用它向页面添加一个日期选择器,但没有任何成功..所以我找到了日期选择器的代码,使用查询 ui: Datepicker

And tried this in a new html page, and it worked like a charm. However, i now want to use this in the page i was working on, but it seems like there are some conflicts between the different scripts and css files. Is there a way to solve this?

并在一个新的 html 页面中尝试了这个,它就像一个魅力。但是,我现在想在我正在处理的页面中使用它,但似乎不同的脚本和 css 文件之间存在一些冲突。有没有办法解决这个问题?

(i have delated the content of the page but left the scripts and links i'm importing)

(我已经删除了页面的内容,但留下了我正在导入的脚本和链接)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Svensk Bridge</title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
    </head>

    <body>

        <p>Date: <input type="text" id="datepicker" /></p>


        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/bootstrap.js"></script>
        <script type="text/javascript" src="../js/list-function.js"></script>
    </body>
</html>

If i were to import all the files for the jquery ui for the date picker, it won't work.

如果我要为日期选择器导入 jquery ui 的所有文件,它将不起作用。

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>


</body>
</html>

So, to sum up: Can i implement the jquery ui datepicker into my already existing document? And which scripts and links get prioritized?

所以,总结一下:我可以将 jquery ui datepicker 实现到我已经存在的文档中吗?哪些脚本和链接被优先考虑?

Regards, Bill

问候, 比尔

回答by Samuel Robert

I am using Bootstrap with Jquery UI datepicker, the problem must be the order in which you import things. Here my order:

我正在将 Bootstrap 与 Jquery UI datepicker 一起使用,问题一定是您导入内容的顺序。这是我的订单:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link type="text/css" href="css/jquery-ui-1.10.2.custom.css" rel="stylesheet" />
<link type="text/css" href="css/bootstrap.css" rel="stylesheet" />

回答by CBarr

You could, but my personal preference would be to add a Bootstrap-style datepicker instead. I've been using this one and it's pretty great. http://www.eyecon.ro/bootstrap-datepicker/

你可以,但我个人的偏好是添加一个 Bootstrap 风格的日期选择器。我一直在使用这个,它非常棒。http://www.eyecon.ro/bootstrap-datepicker/

The advantage here is that you don't actually need to include the jQuery UI library for this.

这里的优点是您实际上不需要为此包含 jQuery UI 库。