3

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

  <link rel="stylesheet" href="css/jquery/jquery-ui.css">
  <script src="js/jquery.js"></script>
  <script src="js/jquery.ui.core.js"></script>
  <script src="js/jquery.ui.widget.js"></script>
  <script src="js/jquery.ui.slider.js"></script>
  <script src="js/jquery.ui.datepicker.js"></script>
  <script src="js/jquery-ui-timepicker-addon.js"></script>

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

2 Answers 2

5

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

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

3
  • Thank you. I only had to include the jquery-ui.min.js file. I don't know what is it for my oncw i included it it worked. Thanks for the help
    – Jaylen
    Mar 22, 2013 at 19:48
  • the core-slider functions you are looking for are included in the jquery-ui.min.js :) Mar 22, 2013 at 19:52
  • How do I select only timepicker? Dec 18, 2014 at 12:43
0

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

<input type="text" class="datepicker" id="matchStartDate"/>
<input type="text" class="timepicker" id="matchStartTime">

For posting with MVC

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.