How to correctly implement jQuery datepicker and jQuery time picker-Collection of common programming errors

I am trying to install datepicker UI on my application along with its cool addon Timepicker http://trentrichardson.com/examples/timepicker/#basic_examples

I keep getting this error in the console

Uncaught TypeError: undefined is not a function jquery.ui.widget.js:71
$.widget jquery.ui.widget.js:71
(anonymous function) jquery.ui.slider.js:22
(anonymous function) jquery.ui.slider.js:672

I am trying to use example #3 which is a datepicker plus a slider (time format)

$('#basic_example_3').datetimepicker({
    timeFormat: "hh:mm tt"
});

Here is what I my head html code

  
  
  
  
  
  
  

I don’t see a slider at all in my calender pop up. I see a drop down menu with time! Can some one help me with this please? I think if I can fix that error it will solve the problem.

Thanks

  1. Regarding the source of the example page I would suggest trying this setup:

    
    
    
    
    

    Edit: Created a fiddle for you: http://jsfiddle.net/sNa8d/

  2. if you want to use datepicker + timepicker and you have only one input to post them you can combine datepicker and timepicker on submit function like below:

    Jquery

    $("form").submit(function () {
    
         var matchStr = $('#matchStartDate').val() + ' ' +$('#matchStartTime').val();
         $('#MatchStartTime').val(matchStr);
    
         return true;
      });
    

    HTML

    
    
    

    For posting with MVC

     @Html.HiddenFor(m => m.MatchStartTime)