Sometimes you need to use a drop-down select box routine to allow users to select a date that you can easily save in a MySQL database. Here is one way to generate date boxes using PHP. The code also includes a JavaScript date validation function that prevent users from selecting an invalid date. The function also handles leap year situations.
If you know basic PHP, this routine is pretty simple to use. There are just two short blocks of code that are easily modified. One is the PHP/HTML code for generating the select boxes, and the other is the JavaScript validation routine.
You could use PHP to validate the date, but that would require that the user submit the page, which would have to be rewritten with the errors highlighted. JavaScript forces the user to select a valid date prior to submitting the code to your server, so it does save a minimal amount of resources. JavaScript, however, does not work if a user disables it in their browser or sets the security level to high in Internet Explorer. If a valid date is a critical component of your web application, you might want to look a using PHP for the validation. Perhaps we will cover that in another tutorial.
The following PHP date select box code can be added to any web page on a server that runs PHP.
<form method="post" action="nextpage.php" id="dateForm"; onsubmit="return validateForm(this)"> <!-- cut and paste PHP code below this line into your form --> <?php $month = array( array("01","Jan"), array("02","Feb"), array("03","Mar"), array("04","Apr"), array("05","May"), array("06","Jun"), array("07","Jul"), array("08","Aug"), array("09","Sep"), array("10","Oct"), array("11","Nov"), array("12","Dec") ); ?> Month: <select name="startMonth" id="startMonth"> <option value="00">-- <?php for($i=0; $i<12; $i++) { echo "<option value=\"".$month[$i][0]."\">".$month[$i][1]."\n"; } ?> </select> Day: <select name="startDay" id="startDay"> <option value="00">-- <?php for($i=1; $i<32; $i++) { echo "<option value=\"".$i."\">".$i."\n"; } ?> </select> Year: <select name="startYear" id="startYear"> <option value="0000">---- <?php for($i=2000; $i<2012; $i++) { echo "<option value=\"".$i."\">".$i."\n"; } ?> </select> <!-- cut and paste PHP code above this line into your form --> <input type="submit" value="Submit"> </form>
Second, add the JavaScript code. You can add this in the head section of a web page or use an external file. My preference is to always put JavaScript functions in an external file. Your web pages will render slightly faster and it will be easier for search engine spiders to find the content on your pages.
<script type="text/javascript"> function validateForm(theForm) { var monthdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31); var daysinmonth = monthdays[parseFloat(theForm.startMonth.value)-1]; if (theForm.startMonth.value == "02" && (theForm.startYear.value % 400 == 0 || (theForm.startYear.value % 4 == 0 && theForm.startYear.value % 100 != 0))) { monthdays[theForm.startMonth.value-1]++; daysinmonth = monthdays[theForm.startMonth.value-1]; } if (theForm.startMonth.value == "00") { alert("You must select a Month"); theForm.startMonth.focus(); return (false); } if (theForm.startDay.value == "00") { alert("You must select a Day"); theForm.startDay.focus(); return (false); } if (theForm.startYear.value == "0000") { alert("You must select a Year"); theForm.startYear.focus(); return (false); } if (theForm.startDay.value > monthdays[parseFloat(theForm.startMonth.value)-1]) { alert("There are only "+daysinmonth+" days in this month."); theForm.startDay.focus(); return (false); } return (true); } </script>
The JavaScript function prevents users from entering an invalid date, such as April 31, and also accomodates Leap Year variations for February.
Third, make sure that the JavaScipt event attribute ( onsubmit=”return validateForm(this)” ) appears in the form tag. This tells the browser to run the validateForn function before submitting the page to the server.
To retrieve the selection on the page that you send the data to and re-assemble it in a date format, such as 2009-01-21, you can use the following:
if (isset($_POST['startYear'])) $startYear = $_POST['startYear']; if (isset($_POST['startMonth'])) $startMonth = $_POST['startMonth']; if (isset($_POST['startDay'])) $startDay = $_POST['startDay']; if (isset($_POST['startYear'])) $startDate = $startYear."-".$startMonth."-".$startDay;
nice code!!! but what about the leap year where there are 29 days in the month of FEB???
You must not know how to read JavaScript. All the leap year issues are covered in the validation routine.
Vinod must not have bothered to read the last sentence of the first paragraph…
“… The code also includes a JavaScript date validation function that prevent users from selecting an invalid date. The function also handles leap year situations.”
*sigh*
You may want to change the ‘startMonth’ names in the form elements to startDay and startYear. Otherwise, the JS doesn’t work.
Those are the two offending lines, change them to the names mentioned, and it works.
Ooops. You caught some typos. They have been fixed. Many thanks. 🙂
Nice and simple code..has really helped me
I want to thank you so much for this simple but very powerful code. It did help me.