Unable to implement Bootstrap Datepicker on JSP...please help

[Vinod Vijay]

Hi, Im working on Liferay 6.1 CE GA2. I have successfully integrated twitter bootstrap to make my application work and fit perfectly with different devices based on their screen resolutions.
I have spend my 3 days to implement bootstrap date picker on my JSP but still unable to achieve that. Please help me I tried and put so much of efforst but nothing is working. Just FYI , i don't know jquery, so does it has something to do with that. Anyways I'm not using jquery at all in my project. Here is my code:-

Calling JS/CSS files on JSP code(files are coming on PAGE):-

<link type="text/css" href="<c:url value="/less/datepicker.less"/>" rel="stylesheet"/>
<link type="text/css" href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet"/>
<link type="text/css" href="<c:url value="/css/bootstrap-responsive.css"/>" rel="stylesheet"/>
<link type="text/css" href="<c:url value="/css/datepicker.css"/>" rel="stylesheet"/>

<script src="<c:url value="/js/bootstrap-datepicker.js"/>"></script>

<fmt:setBundle basename="content.Language"/>

Initiating date picker through JS <script> tag:-

$('.datepicker').datepicker('show');

Calling date picker field on JSP:-

 <input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker" >

I also tried with

$('.datepicker').datepicker();

but nothing is working. Text box is working but no date picker when I select text picker. I'm referring following link:-
http://aymkdn.github.com/Datepicker-for-Bootstrap/

Screenshots are attached for reference.

Thanks! I would really appreciate your help.