Single Date Range Picker In Oracle APEX Using JavaScript

Introduction :

In many Oracle APEX applications, date selection is a common task — whether it’s filtering reports, exporting data, or running analytics. Traditionally, this requires two separate date pickers: one for the start date and another for the end date.

With a JavaScript Date Range Picker (using the daterangepicker.js library), you can combine both into a single, intuitive control that allows users to pick a range effortlessly — without installing any APEX plugin. This improves user experience and keeps the UI cleaner.

Technology Used :

  • Oracle APEX– Low-code development platform.
  • js– JavaScript library for date range selection.
  • JavaScript & jQuery– For initialization and interaction handling.
  • SQL/PLSQL– For filtering data using the selected date range.

Why We Need to Do :

  1. Using two separate date fields can:
  • Make the form cluttered.
  • Require extra clicks for date selection.
  • Lead to inconsistent formats or mismatched ranges.
  1. With a single JavaScript Date Range Picker:
  • Users select both dates in one go.
  • The range is visually clear.
  • You can offer Quick Picks like “Today”, “Last 7 Days”, and “This Month”.
  • Cleaner UI and less data entry effort.

How Do We Solve :

Step 1: Include Required JavaScript & CSS

  • In your APEX Page → JavaScript → File URLsadd:

https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js

  • In CSS → File URLsadd:

https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css

Step 2: Create the Date Range Picker Item

  • Create a new Page Item→ Type: Text Field
  • Name it: P5_DATE_RANGE
  • Set Placeholder: “Select Date Range”

Step 3: Initialize with JavaScript

  • Go to Page → JavaScript → Execute when Page Loadsand add:

$(function() {

  $(‘#P5_DATE_RANGE’).daterangepicker({

    autoApply: true,

    locale: { format: ‘DD-MMM-YYYY’ },

    opens: ‘right’,

    ranges: {

      ‘Today’: [moment(), moment()],

      ‘Yesterday’: [moment().subtract(1, ‘days’), moment().subtract(1, ‘days’)],

      ‘Last 7 Days’: [moment().subtract(6, ‘days’), moment()],

      ‘This Month’: [moment().startOf(‘month’), moment().endOf(‘month’)],

      ‘Last Month’: [

        moment().subtract(1, ‘month’).startOf(‘month’),

        moment().subtract(1, ‘month’).endOf(‘month’)

      ]

    }

  });

   // Optional: Refresh a report when the range changes

  $(‘#P5_DATE_RANGE’).on(‘apply.daterangepicker’, function(ev, picker) {

    apex.item(‘P5_DATE_RANGE’).setValue(

      picker.startDate.format(‘DD-MMM-YYYY’) + ‘ to ‘ + picker.endDate.format(‘DD-MMM-YYYY’)

    );

    apex.region(“my_report_region”).refresh(); // Change “my_report_region” to your region’s Static ID

  });

});

Step 4: Use the Selected Range in SQL

  • If the selected range is stored as:

01-AUG-2024 to 07-AUG-2024

  • You can split it in SQL:

SELECT *

FROM orders

WHERE order_date BETWEEN

      TO_DATE(SUBSTR(:P5_DATE_RANGE, 1, 11), ‘DD-MON-YYYY’)

  AND TO_DATE(SUBSTR(:P5_DATE_RANGE, 16, 11), ‘DD-MON-YYYY’);

Step 5: Test and Enhance

  • Run the page.
  • Select a date range from the dropdown or quick picks.
  • If autoApplyis enabled, the value is set immediately.
  • The report refreshes instantly if you configured the Dynamic Action.

Conclusion :

Using the daterangepicker.js library directly in Oracle APEX lets you implement a clean, modern Date Range Picker without installing any plugin. With quick-pick ranges, min/max restrictions, and auto-apply options, you can create a smooth and efficient date selection experience that improves both usability and aesthetics.

This method is lightweight, flexible, and gives you full JavaScript control over the behavior and appearance of the picker.

Recent Posts