Using Jquery Date Picker with VisualForce Apex inputText

1
votes

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>
2
jquerysalesforceapex-codevisualforceapex

2 Answers

1
votes

Use this line 

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

This will use the control inside jquery

0
votes

Could you please try with below code:

j$(document).ready(function(){           
     var v= '#StartDate'; //putting id of the input field directly
     j$(v).datepicker({
     dateFormat: 'dd-mm-yyyy',
     changeMonth: true,
     changeYear: true});

});