Timepicker and APEX

Written by Paulo Vale on Tuesday, November 18, 2008

ClockPick is a jQuery time picker plugin. As I showed in previous posts, it's fairly easy to integrate third party javascript components with APEX.



A demo of ClockPick working with APEX can be found here.

How to do it?

1- Upload files to your APEX server. You can upload them directly to the server filesystem or use static files in Shared Components;

jquery.clockpick.1.2.4.js
clockpick.1.2.4.css
jquery-1.2.6.min.js

2- Include reference to the CSS file and ClockPick plugin JS file on the page template between HEADER tags or directly in you page properties, Header section:




3- Include reference to the JQuery library file (again in page template or page header):



4- Now the script to make it all happen. Note that this function is binding P9_TIME text element. You can reference the many items you want. You can also change the hour range to be displayed and execute a function after the selection is done. Read ClockPick website to get detailed information about all the configurations available.

6 comments comment | Posted in » , , , ,  

Related Posts by Categories



Widget by Hoctro | Jack Book

  1. 6 comments: Responses to “ Timepicker and APEX ”

  2. By Anonymous on November 21, 2008 at 9:50 AM

    Hello Paulo,

    thanks for this entry. In the near future i need this for my app.

    greets
    Carsten

  3. By Paulo Vale on November 21, 2008 at 10:41 AM

    Carsten,

    I'm glad you found it useful.

  4. By Anonymous on November 25, 2008 at 6:20 AM

    Hey Paulo,
    Have you come accross the Javascript error "Object doesn’t support this property or method".

    If I put the JS into the page itself it works fine. When I inspext the page the JS seams to load but I get the above error.

  5. By Paulo Vale on November 25, 2008 at 9:28 AM

    Thistler,

    Usually, this is because you used a property or method that doesn't exist. The $(document).ready function should be included only on the page where the time items are placed, or else this function will try to apply an action to a non existent object.

  6. By Anonymous on August 25, 2010 at 7:48 PM

    Hi I am not sure if you still monitor this but I am getting an error that says 'jQuery' is undefined. I am using APEX v3.1.1.00.09

  7. By Tokke on July 29, 2013 at 3:40 PM

    Hello Paulo,

    Does your timepicker work in APEX 4.2 also?

Post a Comment

Subscribe to: Post Comments (Atom)