Home/ Questions/Q 8548731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T13:33:47+00:00

I am trying to call apex.widget.datepicker to apply a custom datepicker with the time

  • 0

I am trying to call apex.widget.datepicker to apply a custom datepicker with the time to a field inside “Execute when Page Loads”. In previous versions of Apex this worked fine but we have recently migrated to Apex 4.1.1.00.23

The JS error I get when the page loads is “TypeError: can’t convert undefined to object”

On another note I could change the type of field to date, but how can I then customise the jquery date object that has been binded to that particular field?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When i got access to a 4.1.1 workspace (since apex.oracle.com was updated to 4.2) I promptly tried to reproduce the issues. However, i can’t!
    I’d swear i had an issue on apex.oracle.com, but i’m not so sure anymore whether i made a mistake.

    Actually, 4.1.0 and 4.1.1 respond exactly the same, as i would actually expect them to. 4.2 is different, but only by a little. I don’t know why i have wasted so much time up until now, i must have really been missing some obvious logical flaw.

    I don’t know what changed between 4.0 and 4.1 though, so i’m not sure what you did to initialize a datepicker in 4.0. If all you had to do was to call apex.widget.datepicker on an item to get it to work, in 4.1 that changes a little as there is an extra step involved.

    Before calling apex.widget.datepicker, you have to make sure a locale has been loaded. I spied this from inspecting the ajax calls made by apex when opening the actions > filter menu. That code appends a script tag with a source set to datepicker locale files in the apex_images directory. The file initializes some variables in the datepicker.
    For example, an application with language english = 'en', would initialize as apex.jQuery.datepicker.regional['en']

    This is important, because if this doesn’t happen, you get the undefined object error, since the widget code attempts to access those locale variables. If the script code has not been appended, they won’t be, and apex.widget.datepicker will throw an error.

    To make sure the datepicker code works, you will need to include the locale javascript file. You can do this by adding it to your page header, in the page itself, the template, or you can do it dynamically: it’s up to you to decide the best place.

    Here is an example of dynamically adding the locale file:

    $(document).append('<script type="text/javascript" src="/i/libraries/jquery-ui/1.8.14/ui/i18n/oracle/jquery.ui.datepicker-en.js"></script>');

    This will get the file in the given directory (same as actions>filter would do), and it looks as this:

    //******  AMERICAN  ******
apex.jQuery(function($){
apex.jQuery.datepicker.regional['en'] = {
closeText: "Close",
prevText: "Prev",
nextText: "Next",
currentText: "Today",
monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December" ],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" ],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday" ],
dayNamesShort: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat" ],
dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa" ],
weekHeader: "Wk",
dateFormat: "dd-M-y",firstDay: 0,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""};
apex.jQuery.datepicker.setDefaults(apex.jQuery.datepicker.regional['en']);
});

    Now, do notice that that path has some hard-coding issues. There is ‘/i/’, the jquery version, and the locale. Not much can be done about the jquery version.
    /i/ can be replaced by apex_img_dir
    locale can be caught with the BROWSER_LANGUAGE application variable

    $(document).append('<script type="text/javascript" src="'+apex_img_dir+'libraries/jquery-ui/1.8.14/ui/i18n/oracle/jquery.ui.datepicker-&BROWSER_LANGUAGE..js"></script>');

    should do the trick (inspect your ajax call to make sure!)

    Once the script has been included, it should be safe to call apex.widget.datepicker!

    Now, i’ve also been experimenting on 4.2, and it’s mostly the same there. The only thing which has changed is that you have to include the widget code!

    $(document).append('<script type="text/javascript" src="'+apex_img_dir+'libraries/jquery-ui/1.8.22/ui/i18n/oracle/jquery.ui.datepicker-en.js"></script>' +
'<script type="text/javascript" src="'+apex_img_dir+'libraries/apex/minified/widget.datepicker.min.js?v=4.2.0.00.19"></script>');

    That should cover most of it.

    • 0