/    Sign up×
Community /Pin to ProfileBookmark

Date select boxes

Copy linkTweet thisAlerts:
May 10.2004

I have a Date of Birth section on a form I have and need it to be in mm/dd/yyyy form. I would like to make select boxes for the mm, dd, and year. I would like it if when you select for example June, you only get 30 days in the day select box, or 31 for other months and it is smart enough to know when it is a leap year (if possible). Does anyone have a script like this or can point me in the right direction. I have checked out hotscripts.com, but they don’t have anything that suites my needs.

Thanks

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Michael2003May 10.2004 — [code=php]<form name="dateselect">
<select name="month" onchange="changeD(this.options[selectedIndex].value);">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
<select name="day">
<option></option>
</select>
</form>

<script type="text/javascript">

var mArray = new Array(23, 26, 12, 43, 76, 24, 54, 23, 65, 34, 67, 23); // Change the number of days each month

function changeD(month){
document.dateselect.day.options.length = 0;
for(d=0; d<mArray[month]; d++){
document.dateselect.day.options[d] = new Option(d+1, d+1);
}
}

</script>[/code]
OK, firstly let me point out that the number of days in each month is not right in that code, so you will need to change them in there. Those numbers are in the mArray, so they just need to be changed in there.

Now how it works. When the selected option on the first <select> it calls a function and passes in the number in the mArray that corresponds to the month that it is going to call. That function first clears the options by setting it to 0, then loops up to the number creating a new Option with a value and text corresponding to the day.

There are a couple of improvements that you may want to make. Firstly something to correct for leap years. Secondly have some default values in the day box. I guess adding a window.onload may do this, but you may want to have a go and see if you can get that working yourself.
×

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...