Setting Default Values for Date Picker Items in Oracle APEX

When working with Date Picker items in Oracle APEX, you may often want to set a default value. This can be particularly useful for improving user experience by pre-populating fields with sensible default values. There isn't a direct method available, but in this post, we'll explore two methods to achieve this: using PL/SQL and using JavaScript.

Method 1: Using PL/SQL

We can use PL/SQL processes to dynamically set default values for Date Picker items.

Step-by-Step Guide

1. Navigate to Shared Components:

   • Open your application in the Application Builder.

   • Go to Shared Components.

2. Create an Application Process:

   • Under Logic, click on Application Processes.

   • Click Create to add a new process.

   • Name the process (e.g., Set Default Date for Date Pickers).

   • Set the Point to On Load: Before Header.

3. Add the PL/SQL Code:

    BEGIN
      FOR rec IN (
        SELECT ITEM_NAME
        FROM apex_application_page_items
        WHERE APPLICATION_ID = :APP_ID
          AND PAGE_ID = :APP_PAGE_ID
          AND ITEM_DEFAULT IS NULL
          AND DISPLAY_AS_CODE = 'NATIVE_DATE_PICKER_APEX'
      ) LOOP
            APEX_UTIL.SET_SESSION_STATE(p_name => rec.item_name, p_value => SYSDATE);
      END LOOP;
    END;
   

4. Apply Changes:

   • Save the process and run your application.

This code will loop through all Date Picker items on the page and set their default values to the current date.

I use ITEM_DEFAULT IS NULL to check if a specific page item requires a default value, instead of using our predefined default value.

Method 2: Using JavaScript

Another approach to set default values for Date Picker items is through JavaScript. This method can be particularly handy if you prefer client-side scripting or need to set defaults dynamically based on user interactions.

Step-by-Step Guide

1. Navigate to Page Designer:

   • Open the page where you have the Date Picker items in the Application Builder.

2. Add a Dynamic Action:

   • Select the page (not a specific item).

   • In the right pane, click on the Dynamic Actions tab.

   • Click the + icon to create a new Dynamic Action.

3. Configure the Dynamic Action:

   • Name: Set a name for the dynamic action (e.g., Set Default Date Pickers).

   • Event: Choose Page Load.

   • Action: Select Execute JavaScript Code.

4. Add the JavaScript Code:

    var gDateFormat = apex.locale.getDateFormat();
   
    function getCurrentDate() {
      var today = new Date();
      var formattedDate = apex.date.format(today, gDateFormat);
      return formattedDate;
    }
   
    (function() {
      var datePickers = document.querySelectorAll('.apex-item-datepicker');
   
      datePickers.forEach(function(datePicker) {
        if (!datePicker.value) {
          datePicker.value = getCurrentDate();
          var event = new Event('change', { bubbles: true });
          datePicker.dispatchEvent(event);
        }
      });
    })();
   

5. Apply Changes:

   • Save and run the page.

This JavaScript function will automatically set the default value of all Date Picker items to the current date formatted according to the user's locale settings. The script ensures that any associated dynamic actions or validations are triggered by dispatching a change event.

Conclusion

Setting default values for Date Picker items in Oracle APEX can greatly enhance the user experience by reducing the need for manual data entry. Whether you choose to use a PL/SQL process or JavaScript, both methods provide a flexible way to achieve this functionality. Experiment with both approaches to determine which best fits your application’s requirements.

You can define the JavaScript code in a workspace or application static file for a more robust and global solution. In the next blog, we'll explore this option further.