ApEx: Client-side date auto-formatting

Firstly, all credit to a chap called Matt Kruse who created the superb Javascript functions referenced in this blog entry. His site can be found here.

THE EFFECT

To see the effect, go here and type some dates into the datepicker field (type as opposed to select from the date picker itself). You can type them in pretty much any format you like (e.g. mm/dd/yyyy, mm/dd/yy, mm-dd-yyyy, mm-mon-yy). Then click out of the field (or cause it to lose focus via some other means). You will notice that the date is automatically reformatted to be of the form dd-mon-yyyy. If you enter a date in a format that is not recognised, an alert appears telling you so.

NOTE: The example deals with dates in the US format. See the note later in this entry for details on dealing with other formats.

STEP 1

You will need to get yourself a copy of Matt Kruse’s very useful date functions. These are available from this page of his website.

You will need to include these functions in your ApEx application via some means or other so that they can be called from any page, e.g.

* Paste them into a region on page zero.
OR
* Upload them as a .js file and reference the file in your page headers (or include reference to the .js file in your page template).

STEP 2

Create an Application Item called APP_FORMAT_DATE_HTML

STEP 3

Create an Application Computation of type “On New Instance” for the application item APP_FORMAT_DATE_HTML, setting its value to the text found in this file.

STEP 4

For every item in your application (normally Date Picker items but will work with plain text items) that you want to Auto Format, enter the following into the HTML Form Element Attributes:

&APP_FORMAT_DATE_HTML.

And that’s it.

EXTENSIONS

* You might want to have the date be autoformatted to some other format than dd-mon-yyyy. This can be achieved by changing the line in the APP_FORMAT_DATE_HTML computation which reads:

this.value=formatDate(d,’dd-NNN-yyyy’);

to something else such as:

this.value=formatDate(d,’MMM d, y’);

For a complete list of the valid date formats you can use, please look at Matt Kruse’s source comments here.

* To have the script check for British format dates before US format dates (i.e. dd/mm/yyyy as opposed to mm/dd/yyyy) simply amend the line in the APP_FORMAT_DATE_HTML computation which reads:

parseDate(this.value);

to

parseDate(this.value,'EURO');