Why is my date format not staying in uppercase?

In my application, I have my date format defined as "DD-MON-YYYY".




In my page, I have defined a default date as `sysdate`. So my date renders with the current date, and everything looks good:




However, as soon as I change the date, the month name is not persisting to be in all caps, per:




So, what is going on here?

If we look at the HTML node for selecting another date, we can see it runs the following code:

$.datepicker._selectDay(
    id, 
    +this.getAttribute("data-month"), 
    +this.getAttribute("data-year"), 
    this
);

In the latest APEX, we can view the source for this call in: https://static.oracle.com/cdn/apex/18.2.0.00.12/libraries/jquery-ui/1.12.0/jquery-ui-apex.js?v=18.2.0.00.12

This in turn makes a call to:

this._selectDate( 
    id, 
    this._formatDate( 
        inst, 
        inst.currentDay, 
        inst.currentMonth, 
        inst.currentYear
    )
);

Which in turn returns by:

return 
    this.formatDate( 
        this._get( inst, "dateFormat" ), 
        date, 
        this._getFormatConfig( inst )
    );

OK, so if we put a break point within this function, and try and change the date, we will be able to see that: this._get( inst, "dateFormat" ) is returning the format dd-M-yy. That means the mapping of MON APEX is making is to M is jQuery's date format. If you take a closer look at the jQuery docs, you will see that this is the only option for the short month name.

Therefore, if you want to stick with this format (short month name in upper-case), an easy UI change you could make to add a CSS rule to your application to enforce date picker fields to render in uppercase.

input.apex-item-datepicker {
    text-transform: uppercase;
}