PHP Date Select Box Routine With Date Validation

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;