Menu
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
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?
(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.
<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?
Regards, Bill
526
I am using Bootstrap with Jquery UI datepicker, the problem must be the order in which you import things. Here my order:
<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" />
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/
The advantage here is that you don't actually need to include the jQuery UI library for this.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
