Working with date and time in Acrobat JavaScript (part 3 of 3)

Learn how to manipulate, display, and calculate dates and times in Acrobat JavaScript.

By Thom Parker – June 7, 2006

Part 3 of 3

Building Clocks and Timers with the Date Object

The example file for this section is JavaScriptClock.pdf [PDF 5.2 MB]. In it you’ll find a multi-zone clock, a stopwatch, and a count down timer. We’ll cover the technique for creating the multi-zone clock. The stopwatch and timer are left as exercises for the reader. The code for creating the clock is provided in the following discussion, but it will be helpful to open and examine the file before continuing.

Clocks and timers are just fields that display a time. The problem with making a clock is that you need a way to continuously update the field. Conveniently, Acrobat JavaScript provides a function for creating a continuous timer. The function, app.setInterval(), takes two inputs, some JavaScript (in a text string), and the size of the interval in milliseconds. Every time the interval time expires the JavaScript is executed. In the simplest case, all we need to do is write a time value into a field.

app.setInterval( "this.getField("clk").value = util.printd("HH:MM:ss",new Date();" ,50);

However, for most situations more lines of code are needed. The easiest way to deal with lots of code is to place it into a function and call the function from the interval timer, as shown in the following code.

function DoClock(){ 
    this.getField("clk").value = util.printd("HH:MM:ss",new Date(); 
} 

app.setInterval("DoClock();",50);

The code that starts the clock is stored in a Document Script named “ClockCode”. Among other things this means the clock is started when the document is opened. There is a button at the top of the page for starting and stopping the timer that drives the clock. It’s a good idea to have one of these around when working with timers because they can create havoc and may be impossible to stop from the console window. Let’s take a look at the code in this button. It can be accessed in Acrobat from the Properties Dialog for the button. Select the Actions tab and then “Edit” the “Mouse Up” Action.

if(theClockTimer){ 
    app.clearInterval(theClockTimer) theClockTimer = null; 
    event.target.buttonSetCaption("Start Timer"); 
}else{ 
    theClockTimer = app.setInterval("DoTimers()",40); 
    event.target.buttonSetCaption("Stop Timer"); 
}

The variable named “theClockTimer” is the actual timer object, and it is declared in the document script named “ClockCode”. If the timer exists then it is killed with the “app.clearInterval()” function. If the timer object does not exist, then it is created with the “app.setInterval()” function. The JavaScript executed by the timer is simply a call to a function named “DoTimers()”. This function is also defined in the “ClockCode” document script.

Open the Acrobat Document Scripts dialog. Select the “Advanced > JavaScript > Document JavaScripts...” menu item. There are 4 document scripts in this file.

ClockCode – Initialization and main timer function.
ClockProc – Code for the multi-zone clock.
CountDownProc – Code for the count down timer.
StopWatchProc – Code for the stopwatch.

The main timer function, which is not shown here, acquires the current time and passes the millisecond value to each of the different time procedures; clock, stopwatch, and count down timer. Let’s take a look at the code in “ClockProc”. The first part of this code is shown below.

function ClockProc(nCurTime){ 
    var nEquUTC = nCurTime + (new Date()).getTimezoneOffset()*60*1000; 
    var nClockTime = nEquUTC; 
    switch(this.getField("TimeZoneSel").value){ 
        case "Local": 
            nClockTime = nCurTime; 
            break; 
        case "UTC": 
            nClockTime = nEquUTC; 
            break; 
        case "Portland": // Portland is -8 from UTC 
            nClockTime = nEquUTC - 8 * oneHour;

The first line of the function finds the number of milliseconds that will cause the “util.printd() function to print out the UTC (Universal, or Greenwich Mean Time). This is the standard time zone from which all other times are measured. The Date Object conveniently provides us with a function that returns the number of minutes between us and UTC, the “getTimezoneOffset()” function. All we need to do is convert this number into milliseconds and add it to the current time.

The next few lines of code use a switch statement to manipulate the actual time the clock will display based on the selected time zone. All times are calculated as an offset from the UTC Time. The code after the switch statement puts it all back together.

var oClkTime = new Date(nClockTime); 
if(this.getField("Use24Hr").isBoxChecked(0)){ 
    strClock = util.printd("HH:MM:ss",oClkTime); 
}else{ 
    strClock = util.printd("h:MM:ss tt",oClkTime); 
} 

this.getField("ClockDisp").value = strClock;

The first line above converts the number calculated in the switch statement into a Date Object. The following if statement decides on the exact string format based on the “Use24Hr” check box and the last line writes the date string into the field. The date is displayed as well as the time because some times zones will be on different days.

Both the stopwatch and the count down timer are more complex programmatically because both use simple state machines. However, the date calculations within the scripts are not any more difficult than what has already been discussed and it is worthwhile to take a look at them.

Thanks for reading this article. I hope you found it useful and will be able to use it as a reference for working with times and dates in Acrobat.