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.

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 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> 

Source: Cookbook
Cheers!!! Enjoy

0 comments:

Post a Comment