Create Dynamic Date Selects

If you ever require users to submit a date using an online form, perhaps a birthday or an expiry date, a good way to eliminate spelling mistakes and format the submitted date how you want is to provide drop down ’select’ elements. Using PHP, we can easily create dynamic select elements for the day, month and year.

We’ll make a class to hold all of these functions at the end but to start, we’ll have a look at each function in turn. First, the function that produces a select dropdown for the months.

Months Select

function createMonthSelect() 
{
    $months = array(1=> 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
    $curmonth = date("n");
    //create the month select
    $html = "<select name=\"month\" id=\"month\">\n";
    for ($i = 1; $i <= 12; $i++)
    {
        $html .= "<option value=\"$i\"";
	$html .= ($curmonth == $i) ? " selected=\"selected\">" : ">";
	$html .= $months[$i]."</option>\n";
    }
    $html .= "</select>\n";
    echo $html;
}

First we create an array for the months. It’s important that we make the first index ‘1′ (by default it would be ‘0′). We then find the current month using date(“n”). This returns a number from 1 – 12. We then start to build the select element and create ‘option’ elements for each month inside a simple for loop.

The line that might confuse you is this one:

$html .= ($curmonth == $i) ? " selected=\"selected\">" : ">";

It’s a ternary statement that applies the ’selected’ attribute to the option element for the current month inside the loop.

A similar function creates the ‘days’ select element.

Days Select

function createDaySelect()
{
	$today = date("d");
	$numDays = 31;
	//create the day select
	$html = "<select name=\"day\" id=\"day\">\n";
	for ($i = 1; $i <= $numDays; $i++)
	{
		$html .= "<option value=\"$i\"";
		$html .= ($today == $i) ? " selected=\"selected\"" : "";
		$html .= ">$i</option>\n";
	}
	$html .= "</select>\n";
	echo $html;
}

This time we loop through 1 – 31 and create option elements for each day applying the selected attribute to the current day.

Finally, we make the select element for the year.

Year Select

function createYearSelect()
{
	$year = date("Y");
	//create the year select
	$html = "<select name=\"year\" id=\"year\">\n";
	for ($i = $year -100; $i <= $year; $i++)
	{
		$html .= "<option value=\"$i\"";
		$html .= ($year == $i) ? " selected=\"selected\"" : "";
		$html .= ">$i</option>\n";
	}
	$html .= "</select>\n";
	echo $html;
}

This time I’ve listed years for 100 years before the current. Obviously, you can change this to suit your needs, listing future years too if necessary.

As I said earlier, we’ll now put these functions together inside a basic class.

dateselect.class.php

class DateSelects
{
	private $months;
	private $curmonth;
	private $today;
	private $year;
	private $numDays;
 
	public function __construct()
	{
		$this->months = array(1=> 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
		$this->curmonth = date("n");
		$this->today = date("d");
		$this->year = date("Y");
		$this->numDays = 31;
	}
 
	public function createMonthSelect() 
	{
		//create the month select
		$html = "<select name=\"month\" id=\"month\">\n";
		for ($i =1; $i <= 12; $i++)
		{
			$html .= "<option value=\"$i\"";
			$html .= ($this->curmonth == $i) ? " selected=\"selected\">" : ">";
			$html .= $this->months[$i]."</option>\n";
		}
		$html .= "</select>\n";
		echo $html;
	}
 
	public function createDaySelect()
	{
		//create the day select
		$html = "<select name=\"day\" id=\"day\">\n";
		for ($i = 1; $i <= $this->numDays; $i++)
		{
			$html .= "<option value=\"$i\"";
			$html .= ($this->today == $i) ? " selected=\"selected\">" : ">";
			$html .= $i."</option>\n";
		}
		$html .= "</select>\n";
		echo $html;
	}
 
	public function createYearSelect()
	{
		//create the year select
		$html = "<select name=\"year\" id=\"year\">\n";
		for ($i = $this->year -100; $i <= $this->year; $i++)
		{
			$html .= "<option value=\"$i\"";
			$html .= ($this->year == $i) ? " selected=\"selected\">" : ">";
			$html .= $i."</option>\n";
		}
		$html .= "</select>\n";
		echo $html;
	}
}

Save the above as whatever you like and then include it at the top of your page. To use it you need to create a new instance of the class and then call it’s methods. Here’s a basic example:

index.php

<?php
include_once('dateselect.class.php');
$myselects = new DateSelects();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Dynamic Date Selects</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<form action="myform.php" method="post">
<?php
$myselects->createMonthSelect(); 
$myselects->createDaySelect(); 
$myselects->createYearSelect(); 
?>
<input type="submit" value="Submit Date" />
</form>
</body>
</html>

If you’ve tried this code out, you may have noticed a small flaw. No matter which month is selected, there are still 31 days to choose from. It would be more intuitive to display only the correct amount of days for each month i.e February should only have 28 days to choose from. And what if the selected year is a leap year? Then February should have 29 days listed!

Fortunately, there is a nifty bit of JavaScript that we can use to dynamically update the number of days displayed according to the selected month and year. In the next post, I’ll explain it to you