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

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)

    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.


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


    Edit: Created a fiddle for you:

  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:


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



    For posting with MVC

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