Recipes by Category

App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (6) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) Force.com tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Hide the Current Date Link on an Inputfield

Hide the Current Date Link on an Inputfield

Post by Sebastian Wagner  (2010-10-12)

Status: Unverified
Level: novice

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.

Share

Recipe Activity - Please Log in to write a comment

Thank you for sharing this info. It helpmed me a lot.

by Asish Sasi  (2014-06-23)

Really good write up. Thanks for adding this

by a093000000Bx4xx  (2011-07-04)

can this be changed to work with a Visual Force page.

by lance02232009  (2010-12-05)

 Thanks a lot for adding this.

by imtimran  (2010-11-26)

X

Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on Force.com. When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.