Geek Answers Handbook

Is jQuery datepicker incompatible with Twitter Bootstrap?

I have this datepicker that I want to display on the page. I tried with JQ 1.6.4 and 1.7.2. I am using v1.2.4 playframework with Chromium on Ubuntu.

This is the code I'm working with. This is my view when I try to show the collector.

#{extends 'main.html' /} #{set title:'Download Team Data' /} <table align="center"> <tr> <td height="50px">&nbsp;</td> </tr> </table> <div class="page-header"> <a href="@{Application.downloadAttendanceData()}">Download your team data for this cycle.</a> </div> <div class="demo"> <p> Date: <input type="text" id="datepicker"> </p> </div> <script> $(function() { $("#datepicker").datepicker(); }); </script>

JavaScripts and CSS files are loaded in main.html , which is a view extended in all views. In addition, I tried to reference these files in the above view. These are the links:

 <head> <title>#{get 'title' /}</title> <meta http-equiv="Content-Type" content="text/html" charset="${_response_encoding}"> <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}"> <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/demo.css'}"> <link rel="stylesheet" href="@{'public/bootstrap/css/bootstrap.css'}"> <link rel="stylesheet" href="@{'public/bootstrap/css/bootstrap.min.css'}"> <link rel="stylesheet" href="@{'public/bootstrap/css/bootstrap-responsive.css'}"> <link rel="stylesheet" href="@{'public/bootstrap/less/bootstrap.less'}"> #{get 'moreStyles' /} <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}"> <script src="@{'/public/javascripts/jquery-1.7.2.min.js'}" type="text/javascript"></script> <script src="@{'/public/javascripts/jquery-ui-1.8.21.custom.min.js'}" type="text/javascript"></script> <script src="@{'/public/javascripts/jquery.ticker.js'}" type="text/javascript"></script> #{get 'moreScripts' /} <script src="@{'/public/javascripts/testapp.js'}" type="text/javascript"></script> <script src="@{'/public/bootstrap/js/bootstrap-alert.js'}" type="text/javascript"></script> <script src="@{'/public/bootstrap/js/bootstrap-collapse.js'}" type="text/javascript"> </script> <script> function loaded(){ } </script> </head>

Pressing the input field does not display the date picker. What am I missing?

+4
source share
2 answers

Using jQuery UI with Twitter Bootstrap is a great idea. Mostly because CSS classes can be easily overridden and cause problems with the display of various components. Some things may work, some not, this is not all or nothing.

With this, you can watch this Bootstrap datepicker plugin .

If this does not fit your needs, you need to find out which classes are conflicting between jQuery UI and Bootstrap and fix them. The Chrome CSS viewer lets you see which classes contribute to an element's style (or lack thereof).

+7
source

You have test_input as id but binding datepicker to input_test

0
source

More articles:


All Articles