Salesforce apex:inputText with twitter Bootstrap datepicker is not working properly

Question

This is specifically salesforce/jquery experts. I am trying to use twitter bootstrap datepicker on apex:inputText component. and i have two apex:inputText components on a page. using following code for that.

<script type="text/javascript" src="{!URLFOR($Resource.mypackage,'/js/jquery.min.js')}"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.mypackage,'/js/bootstrap.min.js')}"></script>
    <script type="text/javascript" src="{!URLFOR($Resource.mypackage,'/datepicker/js/bootstrap-datepicker.js')}"></script>
    <link href="{!URLFOR($Resource.mypackage,'/css/bootstrap.css')}" rel="stylesheet"/>
    <link href="{!URLFOR($Resource.mypackage,'/css/bootstrap-responsive.css')}" rel="stylesheet"/>
    <link href="{!URLFOR($Resource.mypackage,'/datepicker/css/datepicker.css')}" type="text/css" rel="stylesheet" />

These are js and css i am using. and following code i am using to create datepicker on the apex:inputText components

    <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: 'mm/dd/yyyy' }); $('.endDate').datepicker({ format: 'mm/dd/yyyy' }); }); /$('.startDate1').datepicker({ format: 'mm/dd/yyyy' }); $('.startDate2').datepicker({ format: 'mm/dd/yyyy' }); });/

There are two standard input text on which datepicker works fine. But when I use it on apex:inputText then datepicker shows up by default on load of the page. like this without clicking on the field. enter image description here

By the way you can ask your question about salesforce directly at salesforce.stackexchange.com — mast0r

Moti Korets Moti Korets · Accepted Answer · 2013-09-03T08:31:15

If i understood your question correctly you want to prevent the datepicker loading onload of page. To prevent standard salesforce datepicker to open onload of page add this code to your page

<script>
function setFocus(){}
</script>

Although this is not documented and might break with future release.

Salesforce apex:inputText with twitter Bootstrap datepicker is not working properly

1 Answers