Hide the Current Date Link on an Inputfield

下記情報はURLから転載する

http://developer.force.com/cookbook/recipe/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.

01 <apex:component access="global">
02 <style>
03     div.hideCurrDate span.dateInput span.dateFormat{
04        display:none;
05     }
06 </style>
07 <div class="hideCurrDate">
08 <apex:componentBody />
09 </div>
10 </apex:component>

How to use the component

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

01 <apex:page standardController="Opportunity">
02 <apex:form>
03 <apex:pageBlock>
04 <apex:pageBlockSection>
05
06 <c:noDateLink>
07 <apex:inputField value="{!Opportunity.CloseDate}"/>
08 <c:noDateLink>
09
10
11 </apex:pageBlockSection>
12
13 </apex:pageBlock>
14 </apex:form>
15 </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.


コメントを残す

メールアドレスが公開されることはありません。