Prevent Calendar Display When Page is Loaded

We've all seen those edit pages in Salesforce when you access the page and a date or date/time field calendar widget immediately pops up. Sometimes that's okay but sometimes we would like to prevent that from happening because we would prefer the focus to be on some other element of the page. As a Visualforce developer you can accomplish this with a very simple snippet of JavaScript.

If you ever looked at the source code of an edit page in Salesforce you would find that there is an onload event listener within the body tag of the page. This tells the page to execute some JavaScript after the page is loaded by the browser. That executed JavaScript will eventually call a function named setFocusOnLoad(), which is a bit of code that tells the browser to focus on a particular element within the page. Typically the focus is given to the first input element on the page. If the first input element of the page is a date or date/time field then the calendar widget will actually be rendered. The calendar will actually render even if the date or date/time field is not first in the page as long as any input elements prior to it are picklists or inputs that can't actually have a cursor placed within them.

Nonetheless, the need may arise when you prefer that the focus is removed from an input element. The easiest way to accomplish this is to create a JavaScript function with the same name as the setFocusOnLoad function but have no logic within it. See below:

<script type="text/javascript">
function setFocusOnLoad() {
    //do nothing
}
</script>

Applied to a Visualforce page you can now see that the focus is removed from the date field when the page is loaded.

<apex:page standardController="Contact">
<!--
    Created by: Greg Hacic
    Last Update: 10 November 2014 by Greg Hacic
    Questions?: greg@interactiveties.com
-->
<script type="text/javascript" charset="UTF-8">
//this function overrides the originally defined function that salesforce.com uses to focus on an element > we don't want that here
function setFocusOnLoad() {
    //
}
</script>
    <apex:sectionHeader title="Contact Edit" subtitle="{!Contact.Name}"></apex:sectionHeader>
    <p>Contacts not associated with accounts are private and cannot be viewed by other users or included in reports.</p>
    <apex:pageMessages ></apex:pageMessages>
    <apex:form >
        <apex:pageBlock title="Contact Edit" id="pageBlock" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"></apex:commandButton>
                <apex:commandButton action="{!cancel}" value="Cancel"></apex:commandButton>
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="2" title="Contact Information">
                <apex:outputField value="{!Contact.OwnerId}"></apex:outputField>
                <apex:inputField value="{!Contact.Birthdate}"></apex:inputField>
                <apex:pageBlockSectionItem >
                    <apex:outputlabel value="First Name"/>
                    <apex:outputpanel >
                        <apex:inputField value="{!Contact.Salutation}"></apex:inputField>
                        <apex:inputField style="width: 100px;" value="{!Contact.FirstName}"></apex:inputField>
                    </apex:outputpanel>
                </apex:pageBlockSectionItem>
                <apex:inputField value="{!Contact.Phone}"></apex:inputField>
                <apex:inputField value="{!Contact.LastName}" required="true"></apex:inputField>
                <apex:inputField value="{!Contact.MobilePhone}"></apex:inputField>
                <apex:inputField value="{!Contact.AccountId}"></apex:inputField>
                <apex:inputField value="{!Contact.Email}"></apex:inputField>
                <apex:inputField value="{!Contact.Title}"></apex:inputField>
                <apex:inputField value="{!Contact.Fax}"></apex:inputField>
                <apex:inputField value="{!Contact.Department}"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>