Oracle ApexCreate Time field HH:MM

oracle-apex

Solution

Honestly, this is not such an easy subject as people might think it is, and probably more from a user interface point of view than technically. The easiest way out? The apex datetimepicker. And honestly, if you're new to the technology I'd advise you to use this, especially if you want to steer clear from javascript/jquery initially. Let's put it this way: the datepicker is fine and works good, but time is really not that fantastic.

Not all that hot right. The value in the input item does not change until you hit 'Close'. The time component seems like a last second sloppy addition honestly. It works, however. (But I'd still set the field to readonly so that a user can not enter text directly.) Allowing text to be entered means it needs to be validated according to the correct format mask. And format masks differ between those in jQuery (the datepicker) and those in Oracle, and it might be possible that your oracle format mask is not possible in the datepicker, adding even more complexity. There is also no 'live' date validation (nor datetime), there is only the builtin item validation which will check the format mask and which fires on submit.

Anyway, I'd say take a look at it. Set your item to be displayed as a Date Picker, and use the format mask under settings to get the datetime picker:

Now you can push it further of course, though it'll cost some effort. There are several options though. Personally, when I've implemented date+time I've always split the date from the time in 2 fields. 1 with the date component, and one with the time component, while keeping the item with the original value hidden (so 3 items total). I then use the datepicker on the date item, and use jquery timepicker plugins on the time item. On submit I then add the 2 values together and parse them in a date, and put this value in the original item again (to allow the standard processing to work on items with source set to database column). One example of a timepicker is here, another one here. They're both not that hard to implement. They have good documentation too. I don't want to dive in the implementation of it here though, I advise you take a look at it first and see how much it scares you. (I'd set up an apex demo but am a bit pressed for time at the moment).

For example, using Trent's (second link) plugin:

- put the js file in the apex images directory. I made a folder "/custom" in my case

add the required js files to the page (assuming apex 4.2, put this in javascript file urls)

#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/ui/jquery.ui.slider.js
#IMAGE_PREFIX#custom/jquery-ui-timepicker-addon.js

use onload code such as this to initialize a field

$("#P95_DEPARTURE_TIME").timepicker({hourGrid: 4,minuteGrid: 10});

It'll end up looking as this:

Any further interaction between pickers will need to be handled in javascript code if you want it live. Don't forget server validations.

As for items, my hidden date item has format mask `DD-MON-YYYY HH24:MI`. Format masks are important, because items are bind variables, and bind variables are `varchar2`. The value in the html form is also just that, text. For example, this is on my displayed date item, with a similar setup for the time item:

Then in an after-submit computation I glue the values together again and put them in the m that'll save the value to the database:

:P95_DEPARTURE_DATE_DISP||' '||:P95_DEPARTURE_TIME

This is just a short guide on the setup though, but might be interesting once you're a bit more familiar with the product.

There are also 2 timepicker plugins on apex-plugin, but honestly I don't find them interesting at all when compared to these already existing fine jquery plugins.

Give it some thought and look at it.

Problem

Original source