Follow these steps to set up Epoch Prime as a Popup calendar/date picker.
1. Download and Link to Files
First, you will need to download the Epoch Prime Files. You can download a 30 day free trial of the Epoch Prime installation package at the Epoch Prime Free Trial Download Page. You will need to purchase a license within 30 days of downloading the Epoch Prime installation package.
Once you've received the files, copy them to your preferred location on your computer or webserver.
2. Create the Configuration XML
The most basic configuration XML you need to use Epoch Prime in popup mode is below:
var configxml = '<configs><initcfg><name>popup1</name><mode>popup</mode></initcfg></configs>';
mycalendar = new EpochPrime(calcontainer,configxml);
name should be unique for each calendar, especially if you're using multiple calendars on the same page. Of course, you can do far more with the XML configuration at both initialization and at startup. See the page on Using XML with Epoch Prime for more details.
3. Assign Epoch Prime to an <INPUT> Box
The traditional way of using Epoch Prime (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 Prime — one for the starting date, and one for the ending date. Click each box below to select a date:
Example Code: one calendar per INPUT box:
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 Prime Popup/DatePicker Test Page</title>
<link rel="stylesheet" type="text/css" href="[path_to_css]/epochprime_styles.css"/>
<script type="text/javascript" charset="utf8" src="[path_to_javascript]/epochprime_classes.js"></script>
<script type="text/javascript">
var popup1, popup2;
window.onload = function() {
/*Initialize the XML configuration here. These are very basic config strings;
see the page on Using XML for more configuration options.*/
var xml1 = '<configs><initcfg><name>popup1</name><mode>popup</mode></initcfg></configs>';
var xml2 = '<configs><initcfg><name>popup2</name><mode>popup</mode></initcfg></configs>';
popup1 = new EpochPrime(document.getElementById('startdate'),xml1);
popup2 = new EpochPrime(document.getElementById('enddate'),xml2);
};
</script>
</head>
<body>
<h1>Click on an <INPUT> box to test out Epoch Prime 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"/><!--The box where the 1st popup will appear-->
<label for="enddate">Ending Date </label>
<input type="text" name="enddate" id="enddate"/>
<input type="submit" value="Submit Form"/><!--The box where the 2nd popup will appear-->
</form>
</body>
</html>
A Faster Alternative: 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 Prime 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 Prime 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: using setTarget()
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 Prime Popup/DatePicker Test Page</title>
<link rel="stylesheet" type="text/css" href="[path_to_css]/epochprime_styles.css"/>
<script type="text/javascript" charset="utf8" src="[path_to_javascript]/epochprime_classes.js"></script>
<script type="text/javascript">
var popup1;
window.onload = function() {
var xml = '<configs><initcfg><name>popup1</name><mode>popup</mode></initcfg></configs>';
/*We only need to initialize 1 calendar; it will be assigned to the
INPUT boxes we specify in the page's BODY*/
popup = new EpochPrime(document.getElementById('startdate'),xml);
};
</script>
</head>
<body>
<h1>Click on an <INPUT> box to test out Epoch Prime 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>
<!--Place a onfocus="popup.setTarget(this);" attribute in every INPUT box you want Epoch Prime to pop up in;
there is no limit on the number of INPUTs you can use with this method!--><input type="text" name="startdate" id="startdate" onfocus="popup.setTarget(this);"/>
<label for="enddate">Ending Date </label>
<input type="text" name="enddate" id="enddate" onfocus="popup.setTarget(this);"/>
<input type="submit" value="Submit Form" onfocus="popup1.setTarget(this);"/>
</form>
</body>
</html>
Adding Dates via XML to a Popup Calendar
You can use the <datesadd> and <datesrem> tags to add special dates and unselectable dates to your popup calendar. You cannot, however, pre-select a date in popup mode. See the Adding/Removing Dates in Epoch Prime page for more details.