Bootstrap DatePicker In Visualforce Page

Question

Can anyone tell how to use bootstrap datepicker in visualforce page? My Apex code as follows:

<apex:page standardStylesheets="true" controller="DatePicker">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="{!URLFOR($Resource.DatePicker1,'/DatePicker1/js/bootstrap.min.js')}"></script>
<script type="text/javascript" src="{!URLFOR($Resource.DatePicker1,'/DatePicker1/js/bootstrap-datepicker.js')}"></script>
<link href="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/bootstrap.css')}" rel="stylesheet"/>
<link href="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/bootstrap-responsive.css')}" rel="stylesheet"/>
<link href="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/datepicker.css')}" type="text/css" rel="stylesheet" />

Hy dude
<!--<apex:includeScript value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/js/bootstrap.min.js')}" /> 
<apex:includeScript value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/js/bootstrap-datepicker.js')}" />

<apex:stylesheet value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/bootstrap.css')}"/> 
<apex:stylesheet value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/bootstrap-responsive.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/datepicker.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.DatePicker1,'/DatePicker1/css/datepicker3.css')}"/>-->

<apex:form >

    <b>Start Date:</b>&nbsp;
    <apex:inputText label="Start Date" id="startDate" value="{!startDateString}" styleclass="editTextFieldSmall startDate"/>
    &nbsp;&nbsp;<b>End Date:</b>&nbsp;
    <apex:inputText label="End Date" id="endDate" value="{!endDateString}" styleclass="editTextFieldSmall endDate" />
    <input type="text" class="startDate1" value="09/01/2013"/>
    <input type="text" class="startDate2" value="09/01/2013"/>
</apex:form>

<script>
    $(document).ready(function(){
        $(document).ready(function(){ 
            $('.startDate').datepicker({  format: "dd/mm/yyyy" }); 
            $('.endDate').datepicker({  format: "dd/mm/yyyy" });
         }); 
            $('.startDate1').datepicker({  format: "dd/mm/yyyy" }); 
            $('.startDate2').datepicker({  format: "dd/mm/yyyy" });
    });
 </script>
</apex:page>

Controller:

public class DatePicker {

public String EndDateString{get;set;}
    public String StartDateString{get;set;}
}

The above code doesnt provide datePicker as provided by bootstrap.. My ques: Wat are the files(like css,js) I have to include in visualforce page?

Thanks in advance Karthick

Answer 1

If you're using bootstrap within the native salesfore UI, you'll want to namespace all the bootstrap classes because there are some conflicts between the salesfore css and bootstrap.

See http://scottvonschilling.com/blog/2014/08/using-bootstrap-in-visualforce/ for an easy way to do this.

Answer 2

You may download the bootstrap datepicker library from the below link and upload it as Static Resource in your Salesforce instance. Then you can use this static resource in your VF Page code.

http://www.eyecon.ro/bootstrap-datepicker/