Easy Date Handling in JavaScript with

Easy Date Handling in JavaScript with

Jon Dixon's photo
Jon Dixon
·Aug 18, 2022·

3 min read

Working with dates and times in pure JavaScript is painful, to say the least. In Oracle APEX 21.2, the APEX team introduced the JavaScript API. The API provides several easy-to-use utility functions that make formatting, parsing, comparing, and performing calculations on dates in JavaScript a breeze. What I like about these functions is that many mirror SQL and PL/SQL functions and operators we know and love. In this APEX 🩳, I will demonstrate three examples.

Example 1 - Date Calculations

The first example demonstrates a typical scenario where users must enter a start and end date. Whenever the user changes the start date, we want to default the end date to the start date plus seven days. Screenshot showing APEX Items for Example In this scenario, P70_START_DATE is the 'Start Date', and P70_END_DATE is the 'End Date'. We have an 'Execute JavaScript Code' Dynamic Action on P70_START_DATE that triggers whenever the value changes and sets the appropriate value in P70_END_DATE. Screenshot showing Dynamic Action to Default End date using

Here is the complete code for the Dynamic Action:

/* Set dateFormat with the Date Format String for the APEX Session.
   Note: does not support all Oracle Format Strings 
     (see the documentation for details)
const dateFormat   = apex.locale.getDateFormat();
// Set the number of days to add to the start date.
const addDays      = 7;
// Get the string value of the start date APEX Item.
var   startDateStr = apex.item("P70_START_DATE").getValue();
// Use to convert the string date value to 
// a date value understood by
var   startDate    =, dateFormat);
var   endDateStr   = "";
// Add 7 days to the startDate., addDays,;
// Convert date back to a String using the date format of the session.
endDateStr = startDate, dateFormat);
// Set the End Date value in the APEX Item.
apex.item( "P70_END_DATE" ).setValue(endDateStr);

The final parameter of identifies the unit (DAY,HOUR,YEAR, etc.). I am adding days in my example, so the unit is DAY. See the documentation for a complete list. We can also use to subtract date/time values.

By changing the type of Dynamic Action from 'Execute JavaScript Code' to 'Execute Server-side Code', we could have used PL/SQL to achieve the same thing.

The benefit of the JavaScript approach is that we avoid a round trip to the database in order to do this simple calculation.

Example 2 - Date Comparisons

In this example, we are checking to make sure the end date is greater than the start date. The javascript below uses to achieve this.

const dateFormat   = apex.locale.getDateFormat();
var   startDateStr = apex.item("P70_START_DATE").getValue();
var   endDateStr   = apex.item("P70_END_DATE").getValue();
var   startDate    =, dateFormat);
var   endDate      =, dateFormat);
// Clear any existing errors on the page
// compares the two dates down to the second.
if ( startDate, endDate,

          type:       "error",
          location:   ["inline" ],
          pageItem:   "P70_END_DATE",
          message:    "End Date must be after Start Date"

Screenshot showing result of End Date Before Start date

There are other comparison functions available in, including isBefore, isBetween, isSame, isSameOrAfter, etc.

Example 3 - Since

You may have encountered the APEX PL/SQL function APEX_UTIL.GET_SINCE. It returns a string describing the elapsed time between a date and time variable and the current date and time. In this example, we use to achieve the same thing as APEX_UTIL.GET_SINCE.

const dateFormat   = 'MM/DD/YYYY HH:MIpm'
var   startDateStr = '07/04/2022 5:00pm';
var   startDate    =, dateFormat);
var   sinceString = startDate );
console.log('Since String: ' + sinceString);

Output from the above snippet: Since String: 13 minutes ago


This blog post was just a taste of the utilities available in I encourage you to explore the documentation to find out more.

🔗 Read More

Share this