Using Epoch as a Popup/DatePicker

Download and Link to Files

First, you will need to download the Epoch Files. Once you've received the files, copy them to your preferred location on your computer or webserver.

Assigning Epoch to an <INPUT> Box

The traditional way of using Epoch (and any other JavaScript calendar) is to create a calendar for each <INPUT> box you want to have a popup/datepicker for. In the example below, there are two instances of Epoch— one for the starting date, and one for the ending date. Click each box below to select a date:

Example Code

You can copy & paste this into an empty HTML file to try it out for yourself!

<!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">
<head>
<title>Epoch Popup/DatePicker Test Page</title>
<link rel="stylesheet" type="text/css" href="[path_to_css]/epoch_styles.css"/>
<script type="text/javascript" charset="utf8" src="[path_to_javascript]/epoch_classes.js"></script>
<script type="text/javascript">
var popup1, popup2;
window.onload = function() {
popup1 = new Epoch('popup1','popup',document.getElementById('startdate'),false);
popup2 = new Epoch('popup2','popup',document.getElementById('enddate'),false);
};
</script>
</head>
<body>
<h1>Click on an &lt;INPUT&gt; box to test out Epoch Popup</h1>
<p>This demo uses the standard, static one calendar-per-input method.
This method works best if you keep the number of calendars low,
since excessive initializations may slow the page down for your users.</p>

<form action="#" method="get">
<label for="startdate">Starting Date </label>
<input type="text" name="startdate" id="startdate"/>
<label for="enddate">Ending Date </label>
<input type="text" name="enddate" id="enddate"/>
<input type="submit" value="Submit Form"/>
</form>

</body>
</html>

Using the setTarget() method

One of our most useful user contributions is the setTarget() method, contributed by Jake Olefsky. It lets you assign a single instance of Epoch to an unlimited number of <INPUT> boxes—all you need to do is add an onFocus() event handler to the box. This saves both memory and reduces your page's load time. Click the boxes below to select a date:

Even though there is only 1 calendar, Epoch remembers the date you selected – that way if you come back to a date you already chose, the date will still show up in the calendar.

Developers who work with DHTML/AJAX will find this method particularly useful. Rather than creating new instances of Epoch when a new text box is created, the developer can simply point the existing calendar to it, saving memory and increasing speed.

Example Code

You can copy & paste this into an empty HTML file to try it out for yourself!

<!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">
<head>
<title>Epoch Popup/DatePicker Test Page</title>
<link rel="stylesheet" type="text/css" href="[path_to_css]/epoch_styles.css"/>
<script type="text/javascript" charset="utf8" src="[path_to_javascript]/epoch_classes.js"></script>
<script type="text/javascript">
var popup1;
window.onload = function() {
popup1 = new Epoch('popup1','popup',document.getElementById('startdate'),false);
};
</script>
</head>
<body>
<h1>Click on an &lt;INPUT&gt; box to test out Epoch Popup</h1>
<p>This demo uses the <var>setTarget()</var> method to dynamically assign the calendar to each text box. There is no limit to the number of text boxes you can add to the page using the <var>setTarget()</var> method.</p>

<form action="#" method="get">
<label for="startdate">Starting Date </label>
<input type="text" name="startdate" id="startdate" onfocus="popup1.setTarget(this);"/>
<label for="enddate">Ending Date </label>
<input type="text" name="enddate" id="enddate" onfocus="popup1.setTarget(this);"/>
<input type="submit" value="Submit Form" onfocus="popup1.setTarget(this);"/>
</form>

</body>
</html>