Ask a Jedi: Localization issue with ColdFusion's Datefield control

This post is more than 2 years old.

Anthony wrote in with the following problem:

Im designing a simple page that allows the user to pick a date and save it in the DB. My DB is SQL express 2005 and below is the code im using for the field:
<cfinput type="DateField" name="SUBMISSION_DATE" message="- You must enter a valid date." validateat="onSubmit" class="field_small" id="SUBMISSION_DATE" value="#DateFormat(DETAIL1.SUBMISSION_DATE,'dd/mm/yyyy')#" enabled="Yes">

I'm just using a cfupdate to store the details back to the db.

My problem is it keeps changing the date back to us format. ie mm/dd/yyyy.

I have looked at the CF date picker and it seems to be displaying the date in us format after being picked so is there some other setting that i need to include to have it store the date as UK.

i have set the locale to English(UK) and tested it so it showing the correct locale.

Im just at a loss as to where i can change the format back to UK or see whats happening.

Ok, so before going any further, the first thing I recommended was getting rid of cfupdate. It's nice for folks who may know nothing about SQL but in general you want to use a cfquery when performing updates. However, that wasn't his issue. I was able to replicate what he saw rather quickly with this code.

<cfset setLocale("English (UK)" )> <cfset theDate = createDate(2010,10,2)> <cfoutput>#dateFormat(theDate)#</cfoutput>

<cfform name="form"> <cfinput name="theDate" type="datefield" > </cfform>

Ok, if we look at this, we can see the date is being rendered correctly in that weird European day first format:

But if you pass the date into the field:

<cfinput name="theDate" type="datefield" value="#theDate#">

You end up something that isn't quite right: 10/02/2010. It displays in American format, but the date is right. Clicking on the calendar will bring you to the right day. Ok, so how to fix? I raised the question on a private listserv and specifically called out to Paul Hastings. In our entire community I don't think anyone else knows as much about localization and internationalization than Paul. Not surprisingly he came up with the answer. It was kind of obvious once I saw it, but it never would have occurred to me. Just make use of the mask attribute!

<cfset setLocale("English (UK)" )> <cfset theDate = createDate(2010,10,2)> <cfoutput>#dateFormat(theDate)#</cfoutput>

<cfform name="form"> <cfinput name="theDate" type="datefield" value="#theDate#" mask="dd/mm/yyyy"> </cfform>

Now when you run this you get a properly formatted result both immediately on display and when changing the value:

Paul actually went a step further and demonstrated how you can even make the mask dynamic. This would be useful on a site that supports multiple locales, not just the UK one:

<cfscript> thisLocale=createObject("java","java.util.Locale").init("en","GB"); format=3; //0==FULL --> 3==SHORT dF=createObject("java","java.text.DateFormat").getDateInstance(format,thisLocale); pattern=dF.toLocalizedPattern(); </cfscript>

Anyway, I hope this helps. This is the first time I've ever seen any of ColdFusion's Ajax controls in a non-American locale so this was all new to me. (I'll also use this opportunity to point out that jQuery UI's date picker supports localization as well.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA