Problems with Trent Richardson timepicker and datetimepicker-Collection of common programming errors

I’m trying to implement Trent’s timepicker, but I’m not being able to do it. I’m testing it in Chrome, Firefox, and IE9.

I already imported Jquery and Jquery UI. The only common error I could find was that Jquery UI wasn’t the full version(without slides), but that’s not my case. Anyway, the errors are the following

Cannot set property 'formatTime' of undefined (line ...)
$.datepicker.formatTime = function(format, time, options) { (this is the line)

Cannot call method '_newInst' of undefined
$t.datepicker($.timepicker._newInst($t, o)._defaults);

I would thank any help, I’m really new at jQuery and I don’t really get it.

  1. I had this exact same problem earlier today. I solved it by making sure I had the latest versions of jQuery and jQuery UI (at first I only updated jQuery and the problem persisted). I would also make sure you have the latest version from Trent Richardson.

  2. Download full version of jquery-ui here, but check all boxes including “Datepicker”. Then replace your jquery-ui js file and run your project. Worked for me.

  3. Use it with an object as input, meaning the extra curly braces:

     
    $('#pickuptime').datetimepicker( { } );
    

    instead of this:

     
    $('#pickuptime').datetimepicker( );
    
  4. I had exactly the same problem last night. The cause of the problem turned out that timepicker javascript file was loaded after the jQuery UI javascript. Since timepicker wants to use $.datepicker that should have been initialized in jQuery UI, it failed miserably.

    In my personal situation, I am using it on Ruby on Rails environment, and I let the order of the javascript loading handled by asset pipeline. It is a nice environment that handles javascript loading with minifying automatically. But I gave that up and went back to linking js files from html manually, and voila! It worked.

  5. Looks like you are having an issue referring to jquery UI with datepicker

    from date time picker web site

    try this reference before your date time picker and after jquery reference