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)