Date of birth entry.

I am designing forms which will be asking people for their date of birth.

I was thinking to use 3 inputs: combos for day / month then let them key in the year.

How can I provide my users a seamless manner in which to input this information, then how do I convert that value back into a datetime format?
LVL 1
mcsolasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SidFishesCommented:
something like this should work for you

                      <cfset vDay = form.day>
                  <cfset vMonth=form.month>                  
                  <cfset vYear =form.year>
                  <cfset vDate = vMonth & "/" & vDay & "/" & vYear>                   

                  #createodbcdate(vDate)#      
James RodgersWeb Applications DeveloperCommented:
heres a nice littel js dropdown that calculates the number of days in teh month so teh user cannot pick feb 30 but can pick feb 29 on leap years

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
<script>


function populate(objForm,selectIndex) {
timeA = new Date(objForm.selYear.options[objForm.selYear.selectedIndex].text, objForm.selMonth.options[objForm.selMonth.selectedIndex].value,1);
timeDifference = timeA - 86400000;
timeB = new Date(timeDifference);
var daysInMonth = timeB.getDate();
for (var i = 1; i < objForm.selDay.length; i++) {
objForm.selDay.options[1] = null;
}
for (var i = 0; i < daysInMonth; i++) {
objForm.selDay.options[i+1] = new Option(i+1);
}

}
</script>
</head>

<body >
<cfoutput>

<div align="center">
<form action="" onsubmit="return false">
<select name="selYear" onChange="populate(this.form,this.form.selMonth.selectedIndex);">
<option value="">Year</option>
<cfloop from="#year(now())#" to="#year(now())-100#" index="idx" step="-1">
<option value="#idx#">#idx#</option></cfloop>
</select>

<select name="selMonth" onChange="populate(this.form,this.selectedIndex);">
<option value=00 selected>Month</option>
<option value=01>January</option>
<option value=02>February</option>
<option value=03>March</option>
<option value=04>April</option>
<option value=05>May</option>
<option value=06>June</option>
<option value=07>July</option>
<option value=08>August</option>
<option value=09>September</option>
<option value=10>October</option>
<option value=11>November</option>
<option value=12>December</option>
</select>

<select name="selDay">
<option>Day</option>
</select>

</form>
</div>
</cfoutput>
</body>
</html>



then on the submission page
#createDate(form.selYear, form.selMonth, form.selDay)#
or
<cfset myDate= #createDate(form.selYear, form.selMonth, form.selDay)#>
trailblazzyr55Commented:
here's a simple test you could use to do what you need, shows how to handle the form fields and work with dates...

code (copy and paste into new .cfm file to test)
------------------------------------------------------

<style type="text/css">
form{margin:20px 0 0 20px;}
div{clear:both;}
fieldset.set1{width:250px;}
fieldset.set2{width:350px;}
div input{float:right;}
div label{float:left;}
legend{padding-bottom:10px;}
</style>

<form name="bDay" action="" method="post">
<fieldset class="set1">
 <legend> <b>BIRTHDAY INPUT TEST</b> </legend>
 <div><label for="birthDy">Enter Day:</label><input type="text" name="birthDy" id="birthDy"></div>
 <div><label for="birthMn">Enter Month:</label><input type="text" name="birthMn" id="birthMn"></div>
 <div><label for="birthYr">Enter Year:</label><input type="text" name="birthYr" id="birthYr"></div>
 <div><br><input type="submit" name="submit" value="SUBMIT"></div>
</fieldset>
</form>

<cfif isDefined("form.submit")>
<cfset dateTimeGroup = createODBCDateTime(createDate(form.birthYr,form.birthMn,form.birthDy))>
<cfoutput>
<fieldset class="set2">
 <legend> <b>OUTPUT VALUES</b> </legend>
 <div><label for="outOne">Standard Date:</label><input type="text" name="outOne" id="outOne" value="#dateFormat(dateTimeGroup,'DD/MM/YYYY')#" disabled="disabled"></div>
 <div><label for="outTwo">DateTime Format:</label><input type="text" name="outTwo" id="outTwo" value="#dateTimeGroup#" disabled="disabled"></div>
</fieldset>
</cfoutput>
</cfif>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
5 Ways Acronis Skyrockets Your Data Protection

Risks to data security are risks to business continuity. Businesses need to know what these risks look like – and where they can turn for help.
Check our newest E-Book and learn how you can differentiate your data protection business with advanced cloud solutions Acronis delivers

raj_Commented:
why not just a javascript Calender control and eliminate the user doing any data entry completely..
http://www.dynarch.com/projects/calendar/
http://www.softcomplex.com/products/tigra_calendar/demo1.html
http://www.mattkruse.com/javascript/calendarpopup/

and many more
mcsolasAuthor Commented:
Ok .. let me check all these suggestions out.

Do any of the suggested calendars work if javascript is disabled?

trailblazzyr55Commented:
the solutions provided by SidFishes and I do not use javascript, so if it were disabled, you'd never know the difference
trailblazzyr55Commented:
the javascript calendars depend on javascript, pretty hard to get around javascript if you want a calendar control...
mcsolasAuthor Commented:
>trailblazzyr55
Yes I figured as much, I was just checking if any 'degraded gracefully' .. as if I use javascript to enhance a page, I would like it to function still without scripting enabled.

Im still up in the air, I split the points because I really liked the functionality of the accuracy of helping people pick Feb 29th on leap years. Given its for insurance data .. I would like to do all I can to help with the accuracy.

Im not sure how I can make the 2 work together
( this has to work js disabled, my tester doesnt even turn it on )
trailblazzyr55Commented:
you can make the fields I had listed for day month and year drop downs rather than text input fields, this would ensure better data integrity, I used text fields to show an example, but for use I would ALWAYS never let a user hand type in date values, I would always force them to use a drop down or set of drops to accomplish the date entry.

All you have to do is simply replace the text fields I had with drop downs.
trailblazzyr55Commented:
Jester had started the drops, you just won't use javascript to populate a single form, just concastinate the three forms into a single variable value like I did in my example... let me know if you still need a hand, I can rewrite what I had with the drops...
mcsolasAuthor Commented:
Dont sweat the details, I can handle that. You most directly answered my question .. I need to take 3 seperate pieces of form data and create a date.

Next, I make the process easy, which is where the assisted answer helps.
I also like the years loop, but I went on the wikipedia and started looking up the oldest humans, I am going to set it at 120.

I think I have plenty to get started with, much thanks for the feedback.
James RodgersWeb Applications DeveloperCommented:
glad i could help


thanks for the points
trailblazzyr55Commented:
You're welcome and I'm glad we could help, just and FYI those people that make it to 120 yrs old probably figure they're too old to learn computers now or don't bother with them, you'd probably be pretty safe at 80-90 years for age and it'll allow you to shorten up the drop down a bit. Depends on your application though...

Good luck and let us know if you need anymore help!
Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.