Visualforce Date Field without sObjects

Salesforce, like the Internet, was built on the fly and in retrospect we probably should have done things differently. While Apex and Visualforce provide a lot of functionality and convenience, some things should just be easier. Enter <apex:inputField /> and <apex:inputText /> and <apex:input />.

Scenario 1: Capture text data and bind it to a sObject

No problem. We can use <apex:inputField />:

<apex:inputField value="{! Account.FirstName }" 
                 html-placeholder="First Name" />

Scenario 2: Capture date and bind it to a sObject

No problem. We can use the same component and just add type="date":

<apex:inputField value="{! Account.PersonBirthDate }"
                 html-placeholder="Birth Date"
                 type="date" />

Scenario 3: Capture text and bind it to a variable/object (not a sObject)

Also, no problem. Let’s say we want to temporarily store an answer we can just use <apex:inputText />:

<apex:inputText value="{! mothersMaidenName }" 
                html-placeholder="Mother's Maiden Name" />

Scenario 4: Capture date and bind it to a variable/object (not a sObject)

Problem. If we want to ask for a start date and we try and add the type="date"to <apex:inputText/>…

<apex:inputText value="{! startDate }" 
                html-placeholder="Start Date" 
                type="date" />

…we’ll get an error: ERROR: Unsupported attribute type.

The solution is simple, but it took me way-to-long to track down. The solution is <apex:input />. The answer is right in the docs if you know where to look:

“…component to get user input for a controller property or method that does not correspond to a field on a Salesforce object.”

<apex:inputText /> will do that as well, but not for the type date, which can be confusing for a lot of Salesforce developers.

<apex:input value="{! startDate }" 
            html-placeholder="Start Date" 
            type="date" />

This handy component will create a date field and even includes a date-picker if you need it.

We hope this helps.

Please feel free to leave kind comments, suggestions, corrections and better solutions!