CODEWITHSUNDEEP
jquerydatepickertimepicker
Jaylen
Jaylen

Reputation: 40381

How to correctly implement jQuery datepicker and jQuery time picker

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

Upvotes: 3

Views: 23523

Answers (2)

user2349591
user2349591

Reputation:

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)

Upvotes: 0

optimisticupdate
optimisticupdate

Reputation: 1689

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/

Upvotes: 5

Related Questions