I play 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 datepicker using the ui request: Datepicker
And tried it on a new html page, and it worked like a charm. However, now I want to use this on the page I was working on, but there seem to be some conflicts between different scripts and css files. Is there any way to solve this?
(I processed the contents of the page, but left the scripts and links that I import)
<!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 jquery ui to select a date, this would not 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 summarize: can I implement jquery ui datepicker in my existing document? And which scripts and links take precedence?
Regards, Bill
source share