4

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

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.

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.