Using JavaScript to Submit UTC Dates To The ColdFusion Server

Posted October 2, 2012 at 10:25 AM by Ben Nadel

Yesterday, I blogged about changes to the [undocumented] Date::getTime() method in ColdFusion 10. It seems that in the lasest release of ColdFusion (10), the date/time objects are starting to become more timezone-aware. But, being that my production server is still running ColdFusion 9, this was not so comforting. As a follow-up experiment, I wanted to make sure that I could still post UTC milliseconds to the ColdFusion server (from JavaScript) and then successfully store those values in the database as Coordinated Universal Time (UTC) dates.

The JavaScript Date() object is pretty powerful. It allows us to work, on the client, with both local times and global times. We can even convert complex Date/Time strings into JavaScript Date() instances. These Date() instances can then supply us with the number of milliseconds that have passed since January 1, 1970 UTC - a value that represents a universal date/time.

In this experiment, I am going to let the user enter in their local date/time. This local date/time value will then be convert into UTC milliseconds and submitted to the ColdFusion server. The ColdFusion server will then convert this UTC milliseconds back to a server-local date/time value (EST in my case), before inserting it into the database as a UTC date/time value.

<cfparam name="form.submitted" type="boolean" default="false" />
<cfparam name="form.utc" type="string" default="" />
<cfif (
form.submitted &&
isNumeric( form.utc )
)>
<cfset localDate = createObject( "java", "java.util.Date" ).init(
javaCast( "long", form.utc )
) />
<!---
Convert the local date to a UTC date (my server / computer
currently runs in EST).
--->
<cfset utcDate = dateConvert( "local2utc", localDate ) />
<cfquery name="insertUtc">
INSERT INTO utc_testing
(
utc,
createdAt
) VALUES (
<cfqueryparam value="#utcDate#" cfsqltype="cf_sql_timestamp" />,
<cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp" />
);
</cfquery>
</cfif>
<cfquery name="utcEntries">
SELECT
id,
utc,
createdAt
FROM
utc_testing
ORDER BY
createdAt DESC
</cfquery>
<cfcontent type="text/html; charset=utf-8" />
<cfoutput>
<!doctype html>
<html>
<head>
<title>Submitting UTC Times To The ColdFusion Server</title>
</head>
<body>
<h1>
Submitting UTC Times To The ColdFusion Server
</h1>
<p>
Now: #now()#<br />
UTC: #dateConvert( "local2utc", now() )#
</p>
<form method="post" action="#cgi.script_name#">
<input type="hidden" name="submitted" value="true" />
<!---
The UTC milliseconds - what's *really* being
submitted back to the server as the date/time.
--->
<input type="hidden" name="utc" value="" />
<p>
Enter your local date/time:
<input type="text" name="date" size="17" />
at
<input type="text" name="time" size="22" />
</p>
<p>
<input type="submit" value="Submit Time" />
<a href="#cgi.script_name#">Reset</a>
</p>
</form>
<cfdump
var="#utcEntries#"
label="UTC Entries"
/>
<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
<script type="text/javascript">
// Get and cache the DOM references we'll need.
var dom = {
form: $( "form" ),
utc: $( "input[ name = 'utc' ]"),
date: $( "input[ name = 'date' ]"),
time: $( "input[ name = 'time' ]")
};
// Set the default values for the date and time fields.
dom.date.val(
(new Date()).toDateString()
);
dom.time.val(
(new Date()).toTimeString()
);
// List for the form submission. When the user submits
// the form, we want to convert their local date/time
// value into UTC millisecodns so we can send back the
// universal time value.
dom.form.submit(
function( event ) {
// Try to parse a valid date from the user input.
// This will return the number of milliseconds
// from 1970, UTC.
var localUtc = Date.parse(
dom.date.val() + " " +
dom.time.val()
);
// Make sure the value is numeric. This means the
// date could be parsed.
if ( isNaN( localUtc ) ) {
// Oop, invliad date.
alert( "Could not parse your date." );
// Stop the form from submitting.
return( event.preventDefault() );
}
// If we made it this far, the date could be
// parsed - store it in the form (and then
// let the form submission happen).
dom.utc.val( localUtc );
}
);
</script>
</body>
</html>
</cfoutput>

As you can see, we are using the UTC milliseconds as a way to transport time from the client to the server without having to know the client's current timezone. We simply let the client report its universal time and let the server worry about storing that in the database.

This approach wouldn't work if we need to initiate tasks on the server, relative to the client's local time (ex. sending out an email or SMS text message at a specific client time). However, for client-initiated requests, passing UTC milliseconds to the server seems to enable us to respond to the client without having to know their local timezone.

Reader Comments

John Desoja

Oct 10, 2012 at 9:56 AM // reply »

1 Comments

9 Points

Thanks for this. will it helpful for multiple servers?

Ben Nadel

Oct 27, 2012 at 5:48 PM // reply »

11,238 Comments

75,337 Points

@John,

This will play nicely with multiple servers because it doesn't matter where the server is located. As long as the server stores the data with UTC date, everyone will be on the same page.

Post A Comment

: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Author Name:
Author Email:
Author Website:
Comment:	Supported HTML tags for formatting: <strong>bold</strong> <em>italic</em> <code>code</code>
	Remember my information
	Subscribe to comments
	Send me a copy of this comment

Ben Nadel's Company - Epicenter Consulting

Chris Hubert

May 17, 2013 at 7:42 PM

HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data

Ben - thanks so much for posting these Angular articles and findings, they've been a huge help towards learning one of the more 'complex' JavaScript frameworks out there (IMO). I have been using Angu ... read »

sgeorge

May 16, 2013 at 5:01 PM

UPDATE: Parsing CSV Data Files In ColdFusion With csvToArray()

Your code was the closest thing I've found to obtaining some direction for converting ISO fields to values that CF can translate properly. Thank you for posting! ... read »

shah

May 15, 2013 at 10:37 PM

Very Simple Pusher And ColdFusion Powered Chat

hi id making plz easy ... read »

Chris B.

May 15, 2013 at 6:07 PM

Making SOAP Web Service Requests With ColdFusion And CFHTTP

Ben, you once again saved my bacon at work. Thank you, thank you, thank you! ... read »

Jonah

May 15, 2013 at 4:15 PM

What If All User Interface (UI) Data Came In Reports?

@Josh, Thanks! @Ben, I definitely recommend the David West book "Object Thinking" I've been quoting from. It goes deeply into the philosophy and history of OO programming. His breadth ... read »

Alex

May 15, 2013 at 11:36 AM

Ask Ben: Print Part Of A Web Page With jQuery

I found this helpfull when you need to keep (refresh) the original parent page after closing the iframe child print dialog (Hoping you're not using a form at this time so it won't submit again): On ... read »

Ben Nadel

May 14, 2013 at 7:13 PM

What If All User Interface (UI) Data Came In Reports?

@Jonah, If there's any books you'd recommend on the subject of domain modelling, I'd love to hear it. I just downloaded the free PDF of "Domain Driven Design Quickly". Figured I'd give it ... read »

Ben Nadel

May 14, 2013 at 6:57 PM

The UX Of Prototyping: Low-Fidelity Is The New High-Fidelity

@Phillip, I'm not sure I follow what you mean? Are you saying that you looked at the list of widgets provided by the jQuery UI and let that be your style guide? ... read »

InVision App - Prototyping Made Beautiful With Prototyping Tools

Using JavaScript to Submit UTC Dates To The ColdFusion Server

You Might Also Be Interested In:

Reader Comments

Post A Comment