Wickham's XHTML & CSS tutorial

PHP and MySQL date, time and future dates

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 updates are mainly related to HTML 5 and CSS3 issues and it displays to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE6 to IE9

PHP date and time and future date

1 green icon Look at php.net for the various date format characters.

You can use the date format characters in variables like this:-

<?php
$date0 = date("y-m-d");
$dateplus10 = date("d M Y", strtotime('+10 days'));
echo $date0 . "<br/>";
echo $dateplus10 . "<br/>";
$timenow = date("G:i");
echo $timenow . "<br/>";
echo date("g:ia");
?>

The output of the four echo statements is:-

12-02-05
15 Feb 2012
21:12
9:12pm

where the first is for the current date in the y-m-d format (y-m-d and y/m/d are default formats) and the second is based on the current date, adding 10 days onto the string value of the date (ie onto y-m-d as text, ie 10 days onto a text date in the format 09-10-29) and changing the format.

The same future date can also be expressed as 10 days added on to the current date string in variable $date0:-

$dateplus10 = date('d M Y', strtotime("$date0+10 days"));

PHP future dates sent to a MySQL database

2 green icon The example below has a simple form which displays the date 10 days in the future in a format which is not the default accepted by a MySQL database; it then formats the date into a default style and sends data to a database; the table below the MySQL setup shows the data extracted from the database in another date and time format and ordered by date and time.

Time formats can be coded in the same way as dates. In this example the time in the form has been shown as a fixed value in the format 09:15 instead of the current time and the output in the bottom table has had the format changed because the field type is Time and the database recognises the form value.

You could use this principle where you wanted to show a preferred date and time for a future delivery or appointment, and the viewer can edit the date and time (although if he edits them incorrectly it will show a date of 1970-01-01 and time of 0000:00:00 in the database, but you will have the Timestamp in the database to see the date and time submitted and you can then verify by email).

The form above has been disabled.

The code for the form and its PHP and MySQL link is:-

<php
/*initialize PHP*/
if ( isset ( $_POST['submit'] ) ){
mysql_connect("localhost","your-username","your-password");
mysql_select_db("database-name")or die( "<p><span style=\"color: red;\">Unable to connect to database.</span></p>");
$date10 = $_POST['futuredate'];
$time1 = $_POST['time'];
$place1 = $_POST['place'];
$email1 = $_POST['email'];
$date1 = date('y-m-d', strtotime("$date10")); //formats future $date10 for MySQL
$result=MYSQL_QUERY("INSERT INTO table-name (ID, place1, date1, time1, email1)". "VALUES ('NULL', '$place1', '$date1', '$time1', '$email1')") or die ( "<p><span style=\"color: red;\">Unable to select table</span></p>");
mysql_close();
//confirm
echo "<p><span style=\"color: red;\">Thank You; your comments have been entered in my database. DO NOT REFRESH THE PAGE or data will be sent again.</span></p>";
}
else
{
// close php so we can put in our code
?>
<form id="form1" method="post" action="the-same-filename.php">
<fieldset>
<legend>Dates to database example</legend>
<label for="date">
Date:
<input id="date" type='text' name='futuredate' value='<?php echo date("d F Y", strtotime('+10 days'));?>' size='20'/>
</label>
<label for="time">
Time:
<input id="time" name="time" size="20" value="09:15"/>
</label>
</label>
<label for="place">
Address:
<input id="place" name="place" size="50"/>
</label>
</label>
<label for="email">
Email:
<input id="email" name="email" size="50"/>
</label>
<label for="submit1" id="submit">
<input id="submit1" class="submit" type="submit" name="submit" value="Submit"/>
</label>
</fieldset>
</form>
<?php
} //close the else statement
?>

See PHP Form to MySQL for details on setting up a MySQL database. The MySQL set up for this example is as follows:-

Field	Type	Length/ Values	Collation	Attributes	Null	Default	Extra	Action
ID	int	5			No		auto_ increment	Primary
date1	Date				Yes	NULL
time1	Time				Yes	NULL
place1	Text		utf8_unicode_ci		Yes	NULL
email1	Text		utf8_unicode_ci		Yes	NULL
timestamp	Timestamp			ON UPDATE CURRENT_ TIMESTAMP	No	CURRENT_ TIMESTAMP

The table below shows all the data that has dates after the current date (which was 10 November 2009 when I prepared this example but I have disabled $today in this example to continue to show the data) with the Timestamp which is automatically added by the database when the entries are submitted; ordered by the date and time entered by the viewer.

ID	Date	Time	Address	Email	Timestamp

3	15 Nov 2009	5:45pm	15 Apple Lane	jon-sparks@supanet.com	2009-11-10 07:46:08

6	16 Nov 2009	9:00am	34 Plum Lane	will-parks@hotmail.com	2009-11-10 08:08:13

1	20 Nov 2009	9:15am	32 Cherry Close	fred-smith@hotmail.com	2009-11-10 07:44:13

4	29 Nov 2009	8:45am	23 Lilac Road	dave-roberts@hotmail.com	2009-11-10 07:47:44

2	29 Nov 2009	11:35am	42 Peartree Avenue	harry-jones@gmail.com.com	2009-11-10 07:45:16

5	01 Dec 2009	3:50pm	2 Damson Street	sue-king@gmail.com	2009-11-10 07:49:46

The code for the table and its PHP and MySQL link is:-

<table class='data'>
<tr>
<td class='idtd'>ID</td>
<td class='datetd'>Date</td>
<td class='timetd'>Time</td>
<td class='placetd'>Address</td>
<td class='emailtd'>Email</td>
<td class='timestamptd'>Timestamp</td>
</tr>
</table>
<?php
mysql_connect("localhost","your-username","your-password") or die(mysql_error());
mysql_select_db("database-name") or die(mysql_error());
$today = date('y-m-d');
$result = mysql_query("SELECT * FROM table-name WHERE date1 > '$today' ORDER BY date1, time1")
//WHERE date1 > '$today' means where dates are more than the current date
or die ("error!");
while($row = mysql_fetch_array( $result )) {
// Print out the contents of each row
echo
"<table class='data'>
<tr>
<td class='idtd'>" . $row['ID'] . "</td>
<td class='datetd'>" . date('d M Y', strtotime($row['date1'])) . "</td>
<td class='timetd'>" . date('g:ia', strtotime($row['time1'])) . "</td>
<td class='placetd'>" . $row['place1'] . "</td>
<td class='emailtd'>" . $row['email1'] . "</td>
<td class='timestamptd'>" . $row['timestamp'] . "</td>
</tr>
</table>";
}
?>

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create a conditional comment which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

top | PHP introduction