Home > ApEx, Javascript > ApEx: Client-side date auto-formatting

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 below:

onBlur="var d=parseDate(this.value);if(d==null&&this.value!=''){alert('This is not a valid date.');} else if(this.value=='') {} else {this.value=formatDate(d,'dd-NNN-yyyy').toUpperCase();}"

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');

Advertisements
Categories: ApEx, Javascript
  1. Gary
    December 17, 2012 at 2:45 pm

    Andrew Tulley :Gary,
    The text you need is:
    onBlur=”var d=parseDate(this.value);if(d==null&&this.value!=”){alert(‘This is not a valid date.’);} else if(this.value==”) {} else {this.value=formatDate(d,’dd-NNN-yyyy’).toUpperCase();}”

    Thanks Andy, I can’t wait to try it out!

  2. Gary
    December 11, 2012 at 8:52 pm

    Hi, I was hoping to try this. I got to step 3 and your “this file” link is not working. If you are still blogging about this, can you include the text from the file or fix the link please? Thanks!

  3. Andrew Tulley
    December 12, 2012 at 9:26 am

    Gary,

    The text you need is:

    onBlur="var d=parseDate(this.value);if(d==null&&this.value!=''){alert('This is not a valid date.');} else if(this.value=='') {} else {this.value=formatDate(d,'dd-NNN-yyyy').toUpperCase();}"

  4. James Chapman
    March 15, 2010 at 7:56 pm

    I found the below edit to the code works well to change the century on yy inputs rather than limit to 70

    function getDateYY() { var date = new Date(); var yyyy = date.getYear();yy = yyyy.toString().slice(2); return yy; }

    function getDateFromFormat
    {if(year > getDateYY()){year=1900+(year-0);}else{year=2000+(year-0);}}}

    Just having one issue. if you set the format to ‘dd/mm/yyyy HH:mm’ and the user inputs dd/mm/yyyy it auto fills the current time instead of zeros.
    is there anyway to change this?

  5. Jeff
    March 23, 2009 at 9:05 pm

    I noticed that a couple of the static file links are no longer working. Any chance those could be resurrected? eg app_format_date_html.txt?

    Thanks

    Jeff

  6. Andrew Tulley
    March 24, 2009 at 2:31 pm

    Jeff,

    Thanks for the note. I’ll make sure those files are back up.

    Andy

  7. February 13, 2008 at 9:03 pm

    Nice article Andy. Works very well indeed. Duncs

  8. September 16, 2007 at 12:18 pm

    Hi Andrew,

    the ApexLib Framework has a similar feature which provides out-of-the-box date-picker checking in the browser. BTW, it shows the error messages as inline errors as APEX does. I think that’s nicer for the user and doesn’t create two classes or error messages.

    See http://apex.oracle.com/pls/otn/f?p=33231:41:::NO:RP:P41_EMPLOYEE_ID:179 for an example.

    Greetings
    Patrick

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: