Search code examples
jquerysalesforceapex-codevisualforceapex

Using Jquery Date Picker with VisualForce Apex inputText

I am trying to use Apex inputText control to input date from user using a jquery Date Picker.

The page code and used javascript function is given below, the code seems to me working absolutely fine when I am using HTML input control but not working with Apex inputText control.

<apex:page showHeader="false" id="mypage" docType="html-5.0" controller="ControllerCalculateIncentive" sidebar="false" standardStylesheets="false">
  <html>
    <head>
     <apex:stylesheet value="{!URLFOR($Resource.styles, 'bootstrap.css')}" />
     <apex:stylesheet value="{!URLFOR($Resource.styles, 'scrum.css')}" />
     <apex:stylesheet value="{!URLFOR($Resource.styles, 'jquery-ui.css')}" />
     <apex:stylesheet value="{!URLFOR($Resource.styles, 'font-awesome.css')}" />
     <apex:includeScript value="{!URLFOR($Resource.styles, 'jquery-1.11.1.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.styles, 'bootstrap.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.styles, 'jquery.min.js')}"/>
     <apex:includeScript value="{!URLFOR($Resource.styles, 'jquery-ui.js')}"/>    
     <script type="text/javascript">
        var j$ = jQuery.noConflict();
        j$(document).ready(function(){           
           var v= '{!$Component.mypage:frm:StartDate}';
            j$(v).datepicker({
                dateFormat: 'dd-mm-yyyy',
                changeMonth: true,
                changeYear: true});

            });
     </script>
    </head>
    <body>
     <apex:form id="frm">
     <apex:inputText id="StartDate" value="{!StartDate}"  ></apex:inputText> 
     <apex:form>
    </body>
  </html>
</apex:page>
Solution

  • Use this line 

    j$('input[id$="StartDate"]')

    This will use the control inside jquery