Oracle APEX Quick Picks for Date Picker

Not sure why this is missing

Basically, I want some Quick Picks for a Date Picker like this

However it it works only for Text fields and substitutions; therefore I have to create some Page Items or whatnot and substitute them in… OK… but can I do it another way? of course I can.

Here is something that quickly solved it for me.

Put this in your Function and Glbal Variable Declaration

function addDateQuickPicks(itemId, quickPicks) {
    var el = document.getElementById(itemId);
    var fmt = el.getAttribute('data-format') || el.getAttribute('format');
    var containerId = itemId + '_CONTAINER';
    var inputContainer = document.querySelector('#' + containerId + ' .t-Form-inputContainer');

    function makeQuickPick(label, dateFn) {
        var date = dateFn();
        var val = apex.date.format(date, fmt);
        var a = document.createElement('a');
        a.href = '#action$a-set-value?itemName=' + itemId + '&value=' + encodeURIComponent(val) + '&displayValue=' + label;
        a.setAttribute('aria-roledescription', 'Quick Pick Link');
        a.setAttribute('aria-controls', itemId);
        a.textContent = label;
        a.onclick = function(e) {
            e.preventDefault();
            apex.item(itemId).setValue(val);
        };
        return a;
    }

    var quickPicksGroup = inputContainer.querySelector('.apex-quick-picks');
    if (!quickPicksGroup) {
        quickPicksGroup = document.createElement('span');
        quickPicksGroup.className = 'apex-quick-picks';
        quickPicksGroup.setAttribute('role', 'group');
        quickPicksGroup.setAttribute('aria-label', 'Quick Picks for Date');
        var errorPlaceholder = document.getElementById(itemId + '_error_placeholder');
        if (errorPlaceholder) {
            inputContainer.insertBefore(quickPicksGroup, errorPlaceholder);
        } else {
            inputContainer.appendChild(quickPicksGroup);
        }
    }
    quickPicksGroup.innerHTML = '';
    quickPicks.forEach(function(qp, idx) {
        quickPicksGroup.appendChild(makeQuickPick(qp.label, qp.fn));
        if (idx < quickPicks.length - 1) quickPicksGroup.appendChild(document.createTextNode(', '));
    });
}

Now put this in Execute when Page Loads (assuming that your Datepicker is named P1_DATE)

addDateQuickPicks('P1_DATE', [
    { label: 'Yesterday', fn: function() { var d = new Date(); d.setDate(d.getDate()-1); return d; }},
    { label: 'Today',     fn: function() { return new Date(); }},
    { label: 'Tomorrow',  fn: function() { var d = new Date(); d.setDate(d.getDate()+1); return d; }}
]);

Now run the page

Want some more examples?

Stick this in Execute when Page Loads

// Usage example:
addDateQuickPicks('P1_DATE', [
    { label: 'Yesterday', fn: function() { var d = new Date(); d.setDate(d.getDate()-1); return d; }},
    { label: 'Today',     fn: function() { return new Date(); }},
    { label: 'Tomorrow',  fn: function() { var d = new Date(); d.setDate(d.getDate()+1); return d; }},

    // Next Monday
    { label: 'Next Monday', fn: function() {
        var d = new Date();
        var day = d.getDay(); // 0=Sun, 1=Mon,...,6=Sat
        var offset = (day === 0 ? 1 : 8) - day;
        d.setDate(d.getDate() + offset);
        return d;
    }},

    // Next Month (same day, next month)
    { label: 'Next Month', fn: function() {
        var d = new Date();
        d.setMonth(d.getMonth() + 1);
        return d;
    }},

    // Next Year (same day, next year)
    { label: 'Next Year', fn: function() {
        var d = new Date();
        d.setFullYear(d.getFullYear() + 1);
        return d;
    }},

    // Start of This Month
    { label: 'Start of Month', fn: function() {
        var d = new Date();
        return new Date(d.getFullYear(), d.getMonth(), 1);
    }},

    // End of This Month
    { label: 'End of Month', fn: function() {
        var d = new Date();
        return new Date(d.getFullYear(), d.getMonth() + 1, 0);
    }},

    // Start of This Year
    { label: 'Start of Year', fn: function() {
        var d = new Date();
        return new Date(d.getFullYear(), 0, 1);
    }},

    // End of This Year
    { label: 'End of Year', fn: function() {
        var d = new Date();
        return new Date(d.getFullYear(), 11, 31);
    }},

    // Next Weekend (Saturday)
    { label: 'Next Weekend', fn: function() {
        var d = new Date();
        var day = d.getDay();
        var offset = (day <= 6) ? 6 - day : 6; // Saturday
        d.setDate(d.getDate() + (offset > 0 ? offset : 7));
        return d;
    }},

    // Next Week (same day next week)
    { label: 'Next Week', fn: function() {
        var d = new Date();
        d.setDate(d.getDate() + 7);
        return d;
    }}
]);