Adding Custom Buttons to Oracle APEX Date Picker Footer (Set Start and End of Month)

In Oracle APEX, the built-in Date Picker is simple and functional — but sometimes, users need quick shortcuts for commonly used dates. For example, setting the first or last day of the current month with just one click can save time and reduce input errors.

In this post, we’ll enhance the Oracle APEX Date Picker by adding two custom buttons — “Set Month Start” and “Set Month End” — directly inside the date picker footer. Using a small piece of jQuery code, you can seamlessly integrate these buttons without modifying the native APEX components.

By the end of this guide, your Date Picker will not only look smarter but also provide a faster and more user-friendly experience. 

⚙️ This customization is created for learning purposes.

Paste the below code on execute when page loads (js)

apex.jQuery(document).on('focus', '#P20_START_DATE', function() {

  var intervalId = setInterval(function() {

    var $footer = apex.jQuery('.a-DatePicker-footer');

    if ($footer.length) {

      if (!$footer.find('.my-custom-btn').length) {

        $footer.append('<button class="a-Button t-Button--hot my-custom-btn">Set Month Start</button>');

        $footer.off('click', '.my-custom-btn').on('click', '.my-custom-btn', function() {

          var today = new Date();

          var monthStart = new Date(today.getFullYear(), today.getMonth(), 1);

          var dd = String(monthStart.getDate()).padStart(2, '0');

          var mm = String(monthStart.getMonth() + 1).padStart(2, '0'); 

          var yyyy = monthStart.getFullYear();

          var formattedDate = dd + '/' + mm + '/' + yyyy;

          apex.item('P20_START_DATE').setValue(formattedDate);

        });

      }

      if (!$footer.find('.my-custom-btn-end').length) {

        $footer.append('<button class="a-Button t-Button--hot my-custom-btn-end">Set Month End</button>');

        $footer.off('click', '.my-custom-btn-end').on('click', '.my-custom-btn-end', function() {

          var today = new Date();

          var monthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);

          var dd = String(monthEnd.getDate()).padStart(2, '0');

          var mm = String(monthEnd.getMonth() + 1).padStart(2, '0');

          var yyyy = monthEnd.getFullYear();

          var formattedDate = dd + '/' + mm + '/' + yyyy;

          apex.item('P20_START_DATE').setValue(formattedDate);

        });

      }

    } else {

      clearInterval(intervalId);

    }

  }, 250);

});

Note: I'll Set P20_START_DATE format mask as DD/MM/YYYY

Demo_Application