"Anonymous" asked me for more explanation on how I implemented the Ext date-picker in Oracle Apex, as seen in my demo.
Look, I don't mind answering, but please put a name on your feedback - anonymous is just rude.
Here's the plain English explanation:
We are converting a simple html input item into a Ext date-picker, which just happens to be associated with a date field in the database.
To make it easy to identify which input items to convert we assign a class of "date-picker" to the item. The code to do the conversion is shown in my demo.
The only other thing to worry about is making sure the date format of the input item matches the database date format.
Everything else you want to know can be learnt by reading the documentation.
Here are the steps:
1. Set the database date format in Apex
Lets use a mask of DD-Mon-YYYY as there's no confusion internationally.
In Apex 3.1 do this directly in Home>Application Builder>Application 200801>Shared Components>Edit Globalization Attributes.
In earlier versions, you need to create application processes for "On Load Before Header" and "On Submit After Page Submission - Before Computations and Validations" with the following code
execute immediate 'alter session set nls_date_format=''DD-Mon-YYYY''';
2. Create the date item
In Apex create a form on a table containing dates.
Make sure the item type of the date field to display as "Text Field" and not "Date Picker".
Finally add class="date-picker" in the Form Elements Attributes.
into your page or page template.
If you run that it all works beautifully.
You'll notice the code allows for alternative data entry format masks e.g "dd/mm/yyyy" and partial formats e.g. "dd/mm".
Thats because the alternate formats are easier for keyboard operators.
See ExtJS documentation on date formats
4. Optional step
You may have noticed on my demo I use "DD-MON-YYYY", not "DD-Mon-YYYY" as shown in this blog.
This is the Ext way on internationalizing dates, so it's not a hack.
Anyway hope this helps.