Monday, September 30, 2013

How to Hide the Current Date Link on an Inputfield


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.


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">  
     div.hideCurrDate span.dateInput span.dateFormat{  
   <div class="hideCurrDate">  
   <apex:componentBody />  

How to use the component

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

 <apex:page standardController="Opportunity">  
      <apex:inputField value="{!Opportunity.CloseDate}"/>  

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.


No comments:

Post a Comment