Task ActivityDate - Behaviour in Visualforce

Question

For a number of apex:inputfields in Visualforce, I'm suppressing the Salesforce date picker and using the browser based one. I'm experiencing odd behaviour when attempting to do so on the Task ActivityDate field:

Example

Markup:

    <apex:page controller="TestController" docType="html-5.0">
        <apex:form id="theForm">
            <apex:inputField value="{!t.ActivityDate}" showDatePicker="false" type="date"/>
        </apex:form>
   </apex:page>

Controller:

public with sharing class TestController {
    public Task t{get; set;}
}

When trying to compile the VF code, I get the following error:

Expected input type 'datetime-local', got 'date' for Date data type

I don't get this error for other Date fields in the database, which have all worked fine. I've also checked the DisplayType for the field and is definitely is being returned as a Date field like all the others.

Out of interest, I gave the compiler what it wanted and changed the type to "Datetime-local" and it saved fine. However, running the page produced an Internal Server error.

Has anybody else run across this issue and resolved it? Or is the answer to create a controller variable to proxy for the ActivityDate field?

Answer 1

One solution is to change the input type dynamically through JavaScript. I tried with the below approach and it is working in Chrome. As the input field is html date type it should work in mobile devices too.

<apex:page controller="TestController1" docType="html-5.0" >
    <script type="text/javascript">
         function stringToDate(_date,_format,_delimiter){
            var formatLowerCase=_format.toLowerCase();
            var formatItems=formatLowerCase.split(_delimiter);
            var dateItems=_date.split(_delimiter);
            var monthIndex=formatItems.indexOf("mm");
            var dayIndex=formatItems.indexOf("dd");
            var yearIndex=formatItems.indexOf("yyyy");
            var month=parseInt(dateItems[monthIndex]);
            month-=1;
            var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
            return formatedDate;
         }
    </script>    
    <apex:form id="theForm">
        <apex:inputField showDatePicker="false" value="{!t.ActivityDate}" id="activityDate" style="width:110px"  />            
    </apex:form>
    <script type="text/javascript">      
        var elem = document.getElementById('{!$Component.theForm.activityDate}');
        var mydate = stringToDate(elem.value,"dd/mm/yyyy","/").toISOString().substring(0, 10);
        elem.value = '';
        elem.type = 'date';
        elem.value = mydate;
    </script>    
</apex:page>

Answer 2

In the end, I made use of a "dummy" property in the controller to represent the date and an field:

<apex:input value="{!activity.aDate}" id="ActivityDateField" styleClass="form-control" type="date"/>

I then used the getters and setters of the property to ensure they were aligned with the ActivityDate on the Task record. Not the most elegant solution, but worked for my purposes.