function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
shashi kanaparthishashi kanaparthi 

Jquery Datepicker style not overriding the salesforce style of Apec input field

Hi,

I am trying to use JQuery date picker in visualforce page. The JQuery date picker is not overwriting the standard salesforce style for apex:input field. Code below:

<apex:page id="thePage" standardController="Interaction__c">
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" target="_blank" rel="nofollow"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css</a>" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" target="_blank" rel="nofollow">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js</a>"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" target="_blank" rel="nofollow">
  <script src="<a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js</a>"></script>  
  
   <script>
    jQuery(function(){
            var $j = jQuery.noConflict();
            $j("input[id$=datepicker]").datepicker({
               changeYear: true,
               changeMonth: true,
               dateFormat: "mm/dd/yy"
            });
          });
</script>
</head> 
  <apex:form >
  <apex:pageBlock >

  <apex:pageblockSection >
  <apex:inputfield value="{!Interaction__c.Call_Date__c}" id="datepicker"/>
  <apex:pageBlockSectionItem />
  </apex:pageblockSection>
  </apex:pageBlock>

  
  </apex:form>

</apex:page>

Let me know if some thing else needs to be done.
V V Satyanarayana MaddipatiV V Satyanarayana Maddipati
1). Added standardStylesheets="false"​ in the <apex:page> tag, which will remove the standard salesfroce datepicker.
2). Removed unnecessary jquery files.
3). Added rel="stylesheet" ​attribute to <link> tag. 
<apex:page id="thePage" standardController="Interaction__c" standardStylesheets="false">
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
  
   <script>
    jQuery(function(){
            var $j = jQuery.noConflict();
            $j("input[id$=datepicker]").datepicker({
               changeYear: true,
               changeMonth: true,
               dateFormat: "mm/dd/yy"
            });
          });
</script>
</head> 
  <apex:form >
  <apex:pageBlock >
  <apex:pageblockSection >
  <apex:inputfield value="{!Interaction__c.Call_Date__c}" id="datepicker"/>
  <apex:pageBlockSectionItem />
  </apex:pageblockSection>
  </apex:pageBlock>
  </apex:form>
</apex:page>

Hope it will work now.

Thanks
Satya.
Pramada Emmadi 2Pramada Emmadi 2
Hello,

Can you please let me know how to hide the datepicker as it is not autoclose in safari browser
System Admin 1038System Admin 1038
Hello Pramada,
What's the best solution to close data picker on page load.