+ Start a Discussion
JaanuJaanu 

How to create date of birth field on visual force page

Hello! I am trying to create an account using visual force page. Note that we have person accounts activated. I am just entering first name, last name, date of birth using VF page. When I try to test it ... I am good with fn, ln. When it comes to DOB, I select the date... but the date disappear as soon as my mouse is off of the field...and defaults to mm/dd/yyyy. After I click next, the record is saved with fn, ln... no DOB. Pls help me what's wrong here...thanks.

<apex:page standardController="Account" docType="html-5.0">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
    <apex:pageBlock title="Account Creation">
        <br>
            <apex:pageblocksectionitem >
                <apex:outputlabel value="First Name    "/>
                <apex:inputText value="{!account.firstname}" id="personFname"/>
            </apex:pageblocksectionitem>
        </br>
        <br>
            <apex:pageBlockSectionItem >
                <apex:outputlabel value="Last Name      " for="personLname"></apex:outputLabel>
                <apex:inputText value="{!account.lastname}" id="personLname"/>
            </apex:pageBlockSectionItem>
            </br>
        <br>        
                <apex:outputlabel value="Date of Birth   " for="persondob"></apex:outputLabel>
                <apex:inputfield type="date" value="{!Account.PersonBirthdate}" style="width:150px" id="persondob"/>
        </br>
        <apex:commandButton id="saveBtn" value="Next" action="{!Save}" />
    </apex:pageBlock>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 
Best Answer chosen by Jaanu
Akshay_DhimanAkshay_Dhiman
Hi Jaanu,

Try for this code.
 
<apex:Page >
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css"/>
        <script>
            $(function() {
                $("#pv2").datepicker({changeMonth: true, changeYear: true}); 
                $("#pv12").datepicker({changeMonth: true, changeYear: true});          
                $(".datepick").datepicker({changeMonth: true, changeYear: true, constrainInput: false});      
              });             
        </script>       
       <script>
           function getComboA(sel,inputId) {
                document.getElementById(inputId).value = sel.value;
            }
       </script> 
        
        
    </head>
    Hello  {! $User.FirstName}
    <br/>
    <B>Use the date fields below to view Travel Dates for a specific time period</B>
    <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1" columnClasses="red,green,blue">
        <br/>
        <CAPTION><B> Salesforce Reports </B></CAPTION>
        <br/>
        <TR>
            <TD ALIGN = "Center">
                <B>Opportunity Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> Visit Summary Reports</B>
            </TD>
        </TR>
        <TR>
            <TD>
                <form method="get" action="/00O28000005DlD3" >           
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
               <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" class="datepick" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv2" style="width: 90px;" onchange="getComboA(this,'pv3')"/>
                
                <select name ="pv2" id="pv3" onchange="getComboA(this,'pv2')">
                    <option value="This Month">This Month</option>
                    <option value="Last Month">Last Month</option>
                    <option value="This Year">This Year</option>
                    <option value="Last Year">Last Year</option>
                    <option value="Today">Today</option>
                    <option value="Yesterday">Yesterday</option>
                    <option value="This Quarter">This Quarter</option>
                    <option value="Last Quarter">Last Quarter</option>
                </select><br/>
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
            <TD>
                 <form method="get" action="/00OE0000002us1h" >
                    <B>C- New Visits</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv4" class="datepick" /><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv5" class="datepick" />
                    <br />
                    <input type="submit" value="My Visits" class="submit" />
                </form>
            </TD>
        </TR>
      
        
        <TR>
            <TD>
                <form method="get" action="/00OE0000002uD4A" >           
                <B>A- Account Yearly Revenue (by Bus Unit)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv6" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv7" class="datepick" />
                <br />
                <input type="submit" value="Account Yearly Revenue" class="submit" />
                </form>
            </TD>
            <TD>
                <form method="get" action="/00OE0000002uHmV" >
                    <B>C- Conversion Rate by Source</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv8" class="datepick"/><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv9" class="datepick"/>
                    <br />
                    <input type="submit" value="Conversion Rate" class="submit" />
                </form>
            </TD>
        </TR>
        
         <TR>
            <TD>
                <form method="get" action="/00OE0000002ujMC" >           
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
               <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv10" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv11" class="datepick" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv12"  style="width: 90px;" onchange="getComboA(this,'pv13')"/>
                
                <select name ="pv2" id="pv13" onchange="getComboA(this,'pv12')">
                    <option value="This Month">This Month</option>
                    <option value="Last Month">Last Month</option>
                    <option value="This Year">This Year</option>
                    <option value="Last Year">Last Year</option>
                    <option value="Today">Today</option>
                    <option value="Yesterday">Yesterday</option>
                    <option value="This Quarter">This Quarter</option>
                    <option value="Last Quarter">Last Quarter</option>
                </select><br/>
                
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
            <TD>
                 <form method="get" action="/00OE0000002us1h" >
                    <B>C- New Visits</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv13" class="datepick" /><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv14" class="datepick" />
                    <br />
                    <input type="submit" value="My Visits" class="submit" />
                </form>
            </TD>
        </TR>
      
    </TABLE>
</apex:Page>

if this answer is useful for you please choose the best answer 


Thanks,
Akhsay

All Answers

PawanKumarPawanKumar
As in my org I do not have Person Account enabled, I tested your code for Contact object anI i am able to save BirthDate. Based on this I would suggest you to try below code just to check whether the below works for you or not? if it did work for you try a different browser and let me know the result.

<apex:page standardController="Contact" docType="html-5.0">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
    <apex:pageBlock title="Account Creation">
        <br>
            <apex:pageblocksectionitem >
                <apex:outputlabel value="First Name    "/>
                <apex:inputText value="{!Contact.firstname}" id="personFname"/>
            </apex:pageblocksectionitem>
        </br>
        <br>
            <apex:pageBlockSectionItem >
                <apex:outputlabel value="Last Name      " for="personLname"></apex:outputLabel>
                <apex:inputText value="{!Contact.lastname}" id="personLname"/>
            </apex:pageBlockSectionItem>
            </br>
        <br>        
                <apex:outputlabel value="Date of Birth   " for="persondob"></apex:outputLabel>
                <apex:inputfield type="date" value="{!Contact.Birthdate}" style="width:150px" id="persondob"/>
        </br>
        <apex:commandButton id="saveBtn" value="Next" action="{!Save}" />
    </apex:pageBlock>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
JaanuJaanu
I tried the above code ...it's creating contact record without dob... same issue as my code with dob .. I tried in IE browser as well.. same problem...
Akshay_DhimanAkshay_Dhiman
Hi Jaanu,

Try for this code.
 
<apex:Page >
    <head>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css"/>
        <script>
            $(function() {
                $("#pv2").datepicker({changeMonth: true, changeYear: true}); 
                $("#pv12").datepicker({changeMonth: true, changeYear: true});          
                $(".datepick").datepicker({changeMonth: true, changeYear: true, constrainInput: false});      
              });             
        </script>       
       <script>
           function getComboA(sel,inputId) {
                document.getElementById(inputId).value = sel.value;
            }
       </script> 
        
        
    </head>
    Hello  {! $User.FirstName}
    <br/>
    <B>Use the date fields below to view Travel Dates for a specific time period</B>
    <TABLE Border= "3" CELLSPACING="1" CELLPADDING="1" columnClasses="red,green,blue">
        <br/>
        <CAPTION><B> Salesforce Reports </B></CAPTION>
        <br/>
        <TR>
            <TD ALIGN = "Center">
                <B>Opportunity Reports</B>
            </TD>
            <TD ALIGN = "Center">
                <B> Visit Summary Reports</B>
            </TD>
        </TR>
        <TR>
            <TD>
                <form method="get" action="/00O28000005DlD3" >           
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
               <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv0" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv1" class="datepick" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv2" style="width: 90px;" onchange="getComboA(this,'pv3')"/>
                
                <select name ="pv2" id="pv3" onchange="getComboA(this,'pv2')">
                    <option value="This Month">This Month</option>
                    <option value="Last Month">Last Month</option>
                    <option value="This Year">This Year</option>
                    <option value="Last Year">Last Year</option>
                    <option value="Today">Today</option>
                    <option value="Yesterday">Yesterday</option>
                    <option value="This Quarter">This Quarter</option>
                    <option value="Last Quarter">Last Quarter</option>
                </select><br/>
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
            <TD>
                 <form method="get" action="/00OE0000002us1h" >
                    <B>C- New Visits</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv4" class="datepick" /><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv5" class="datepick" />
                    <br />
                    <input type="submit" value="My Visits" class="submit" />
                </form>
            </TD>
        </TR>
      
        
        <TR>
            <TD>
                <form method="get" action="/00OE0000002uD4A" >           
                <B>A- Account Yearly Revenue (by Bus Unit)</B>
                <BR/>
                <b>Date Ranges:</b>
                <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv6" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv7" class="datepick" />
                <br />
                <input type="submit" value="Account Yearly Revenue" class="submit" />
                </form>
            </TD>
            <TD>
                <form method="get" action="/00OE0000002uHmV" >
                    <B>C- Conversion Rate by Source</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv8" class="datepick"/><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv9" class="datepick"/>
                    <br />
                    <input type="submit" value="Conversion Rate" class="submit" />
                </form>
            </TD>
        </TR>
        
         <TR>
            <TD>
                <form method="get" action="/00OE0000002ujMC" >           
                <B>New Confirmed/Travels (This Month)</B>
                <BR/>
                <b>Date Ranges:</b>
               <br/>
                Travel Date From (MM/DD/YYYY):
                <input type="text" name="pv0" id="pv10" class="datepick" /> <br/>
                Travel Date To (MM/DD/YYYY):
                <input type="text" name="pv1" id="pv11" class="datepick" />
                <br />
                Confirm Date (MM/DD/YYYY):
                <input type="text" name="pv2" id="pv12"  style="width: 90px;" onchange="getComboA(this,'pv13')"/>
                
                <select name ="pv2" id="pv13" onchange="getComboA(this,'pv12')">
                    <option value="This Month">This Month</option>
                    <option value="Last Month">Last Month</option>
                    <option value="This Year">This Year</option>
                    <option value="Last Year">Last Year</option>
                    <option value="Today">Today</option>
                    <option value="Yesterday">Yesterday</option>
                    <option value="This Quarter">This Quarter</option>
                    <option value="Last Quarter">Last Quarter</option>
                </select><br/>
                
                <input type="submit" value="My Confirmed Travels" class="submit" />
                </form>
            </TD>
            <TD>
                 <form method="get" action="/00OE0000002us1h" >
                    <B>C- New Visits</B>
                    <br/>
                    <B>Date Ranges:</B>
                    <br/>
                    Travel Date From (MM/DD/YYYY):
                    <input type="text" name="pv0" id="pv13" class="datepick" /><br />
                    Travel Date To (MM/DD/YYYY):
                    <input type="text" name="pv1" id="pv14" class="datepick" />
                    <br />
                    <input type="submit" value="My Visits" class="submit" />
                </form>
            </TD>
        </TR>
      
    </TABLE>
</apex:Page>

if this answer is useful for you please choose the best answer 


Thanks,
Akhsay
This was selected as the best answer