[SalesForce] Question on date fields in visualforce page

When I use a date field in a VF page and try to do validation and return a validation error – such as, if date can't be greater than today's date, the date format automatically changes to something like,

Jul 20 2015 00:00:00

and when I try to submit that again, I get an error that states that values can't be converted from text to date. Even when I try to do any formatting within the controller and assign it back to the date field as mm/dd/yyyy, it still only shows in the above format.

Does anyone know how to keep the date format as mm/dd/yyyy or whatever format is acceptable when the post back occurs and I do not get this error.

Right now, I'm using a apex:input "text field" and using the date.parse function to convert it into a date before assigning to the sobject's field before I save it to the database.

Is this the correct way of doing it? or is there an easier workaround?

<apex:page controller="contExtBkup" docType="html-5.0">
<apex:pageMessages />
<apex:includeScript value="{!URLFOR($Resource.D2DCalendar, '/calendar.js')}" />
 <apex:stylesheet value="{!URLFOR($Resource.D2DCalendar, '/calendar.css')}"/>


<apex:form >
<apex:pageblock >
    <apex:pageBlockSection >
                     <apex:pageBlockSectionItem >
                     <apex:outputLabel value="{!$ObjectType.contact.fields.birthdate.label}"  />
                      <apex:outputPanel styleClass="requiredInput" layout="block">
                      <apex:outputPanel layout="block" styleClass="requiredBlock" />
                            <apex:inputtext id="birthdate"   
                                            rendered="{!NOT(dobOp)}"
                                            value="{!contact.birthdate}"
                                            onfocus="initialiseCalendar(this,'{!$Component.birthdate}')"/>

                        <apex:outputPanel rendered="{!dobOp}">
                                <apex:inputtext id="birthdate1" styleClass="error"  

                                            value="{!contact.birthdate}"
                                            onfocus="initialiseCalendar(this,'{!$Component.birthdate1}')"/>

                                <div class="errorMsg"><strong>Error:</strong>&nbsp;{!dob_error}</div>

                            </apex:outputPanel>
                         </apex:outputPanel>
                  </apex:pageBlockSectionItem>  
                   </apex:pageBlockSection>

<apex:pageBlockButtons >
    <apex:commandButton value="Next" action="{!next}"  />
</apex:pageBlockButtons>     

 </apex:pageblock>    


 </apex:form>

Note I'm including an inline Javascript calendar here

Controller:

 //SPN
 public with sharing class contExtBkup {
 public boolean dobOp{get;set;}
 public string dob_Error{get;set;}
 public Contact contact{get;set;}


 public contExtBkup() {
        dobOp=false;   
        if(this.contact == null)
            this.contact = new Contact();
}

public pageReference next(){

    if (contact.birthdate == null){
        dobOp=true;
        dob_Error = 'Please enter date';

    }
     else if (contact.birthdate >= date.today()){
            dobOp=true;
            dob_Error='DOB cant be current/future date';
                       /*string date1 = contact.Birthdate.format();
            contact.Birthdate = date.parse(date1);
            contact.Birthdate = date.parse('07/31/2015'); */
    }                
     else{
           dobOp=false;
           dob_Error='';
         }  
  return page.datePickerJS;
}

enter image description here}

I have added the error message too…How to change this format to something like MM/DD/YYYY so that I don't get the error message about converting text to date.

Best Answer

If you change your inputtext to inputField, then it will work. In this case you would not need the onfocus="initialiseCalendar(...)"

<apex:inputField id="birthdate"   
                      rendered="{!NOT(dobOp)}"
                      value="{!contact.birthdate}"/>

Otherwise, if you want to use a custom date picker, then change your inputtext to input and add type="date"

<apex:input id="birthdate"
                   type="date"
                   rendered="{!NOT(dobOp)}"
                   value="{!contact.birthdate}"
                   onfocus="initialiseCalendar(this,'{!$Component.birthdate}')"/>
Related Topic