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 senior developer evangelist for Adobe. He focuses on document services, JavaScript, 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 https://www.raymondcamden.com

Archived Comments

Comment 1 by PaulH posted on 10/7/2010 at 8:25 PM

"non-American timezone"? i think you meant locale.

Comment 2 by Raymond Camden posted on 10/7/2010 at 8:27 PM

I did - thanks. Will edit.

Comment 3 by David posted on 3/29/2012 at 3:51 PM

The mask attribute fails to work if javascript is turned off, I know i'm being awkward but I have to design a form that works with AND without javascript.. and still display correct time formats. Is there a way to accomplish this?

Comment 4 by Raymond Camden posted on 3/30/2012 at 3:44 PM

Wouldn't it just show a simple text field with no interaction then?

Comment 5 by Richard posted on 4/17/2013 at 5:52 PM

Mask does not work if multiple items in form from cfloop or cfquery! See attached below and advise where I am going wrong

<cfset date1="2012-06-30">
<cfset date_list="2012-07-01,2012-09-30,2012-10-01,2012-12-31">

<p>Dates no format</p>

<cfoutput>#date1#<br></cfoutput>
<cfloop list="#date_list#" index="x"><cfoutput>#x#<br></cfoutput></cfloop>

<p>Dates with dateFormat()</p>

<cfset setLocale("English (UK)" )>

<cfoutput>#dateFormat(date1)#<br></cfoutput>
<cfloop list="#date_list#" index="x"><cfoutput>#dateformat(x)#<br></cfoutput></cfloop>

<h4>Form 1 no Mask</h4>
<cfform name="form1">
<cfinput name="date1" type="datefield" value="#date1#">
</cfform>

<p>&nbsp;</p>

<h4> Form2 UK Date Mask (dd/mm/yyyy)</h4>

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

<p>&nbsp;</p>

<h4> Form3 Mask with multiple lines - UK mask does not work!</h4>

<cfform name="form3">

<cfloop list="#date_list#" index="x">
<cfinput name="date_list" type="datefield" value="#x#" mask="dd/mm/yyyy"><br>
</cfloop>

</cfform>

Anything I can do about this?

Regards

Richard

Comment 6 by Richard posted on 4/17/2013 at 6:02 PM

...and the drop down date box doesn't work either.

Regards

Richard

Comment 7 by Raymond Camden posted on 4/17/2013 at 6:27 PM

Sorry, no help for you here. I strongly recommend *against* using cfinput or any of the form helpers in CF.