How to Hide the Current Date Link on an Inputfield

Problem

The standard apex:inputfield component for a date field generates a link next to the input field, taking a lot of space. The link allows someone to easily enter the current date. However, when you use multiple date fields within a table component, it can be confusing for the user to have these extra links (see Screenshots). This recipe solves this by creating a Visualforce component that uses CSS to remove the link.

Screenshots

Default Behavior: Current date link is rendered

Note the extra links next to each and every date field.
 Modified Behavior: Using a Visualforce component to remove the current date link

As you can see, this is a much more compact view.

Visualforce Component Code

Here's the code for the Visualforce component. It wraps the component body in an HTML div tag, and adds styling to hide a part of that wrapped component.

 <apex:component access="global">  
   <style>  
     div.hideCurrDate span.dateInput span.dateFormat{  
     display:none;  
     }  
   </style>  
   <div class="hideCurrDate">  
   <apex:componentBody />  
    </div>  
 </apex:component>  

How to use the component

Here's a simple Visualforce page to demonstrate component usage:

 <apex:page standardController="Opportunity">  
    <apex:form>  
    <apex:pageBlock>  
     <apex:pageBlockSection>  
     <c:noDateLink>  
      <apex:inputField value="{!Opportunity.CloseDate}"/>  
     <c:noDateLink>  
     </apex:pageBlockSection>  
    </apex:pageBlock>  
    </apex:form>  
  </apex:page>  

Discussion
This code is dependent on the standard salesforce look and feel - and in particular dependent on it not changing. By examining the standard CSS, we know that the current date link is in a span.dateInput span.dateFormat CSS element. So this may be a little fickle depending on UI changes - but it should be easy to change if the standard UI CSS does ever change.

Enjoy.....!!