Adding a Timepicker to jQuery UI Datepicker

[laurihasko]

Hello, Some of you might know this "tutorial" allready: http://trentrichards...les/timepicker/ Q: Can someone tell me how to add files in right way? I installed jQuery development-bundle folder where are some demos and other files for different jQuery tutorials. Could someone explain a little bit how this thing works. I got Datepicker to work 100% but with this Timepicker add on it's somehow complicated. I put JavaScript file in this location:<script src="jquery/development-bundle/ui/jquery.ui.timepicker-addon.js"></script> Input:<input id="basicExample2" /> Header:<script>$(function() { $('#basic_example_2').timepicker();});</script> - Thank you all, if someone can say anything for help, Good! Even my best friend Google can't help.----------------------------------------------------------------------------------------------------------------------------- I put here little info about jQuery. I think these demos could be very usefull all of you: About jQuery UIjQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery's event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

Edited September 19, 2012 by laurihasko

[justsomeguy]

Are you checking for Javascript errors?

[laurihasko]

Hey, I have these kind of error codes in index.php -file: ini_set('display_errors', 'on');error_reporting(-1); ..aa sorry if you mean this part, $(function() { $( "#basicExample2" ).timepicker(); }); I just tried different styles.. no help. This is tutorial. So that Datetime worked 100% but I don't understand how to add this single Timepicker thing?? $('#basic_example_2').timepicker();http://trentrichardson.com/examples/timepicker/#slider_examples- thanks anyway!

Edited September 19, 2012 by laurihasko

[justsomeguy]

That's fine for PHP, but that doesn't do anything for Javascript. But instead of setting error_reporting to -1 it's probably better to use the constant E_ALL. If you want to set all bits it would be more reliable to use ~0 instead of -1. Anyway, for Javascript errors you need to check your browser's developer console. Check the links in my signature for whichever browser you're using.

[laurihasko]

Firebug tells me there is no errors: (I think..) <script> $(function() { $( "#datepicker" ).datepicker(); }); $(function() { $( "#basicExample2" ).timepicker(); }); </script> <link rel="stylesheet" type="text/css" href="tyylit.css" media="screen" /> <link rel="stylesheet" type="text/css" href="login_panel/css/slide.css" media="screen" /> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- PNG FIX for IE6 --> <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 --> <!--[if lte IE 6]> <script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script> <![endif]--> <script src="login_panel/js/slide.js" type="text/javascript"></script> <?php echo $script; ?> <link rel="stylesheet" href="jquery/development-bundle/demos/demos.css"> <link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css"> <script src="jquery/development-bundle/jquery-1.8.0.js"></script> <script src="jquery/development-bundle/ui/jquery.ui.core.js"></script> <script src="jquery/development-bundle/ui/jquery.ui.widget.js"></script> <script src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script> <script src="jquery/development-bundle/ui/i18n/jquery.ui.datepicker-fi.js"></script> <script src="jquery/development-bundle/ui/jquery.ui.slider.js"></script> <script src="jquery/development-bundle/ui/jquery.ui.timepicker-addon.js"></script> Only thing what comes to my mind is, maybe I have just too many scripts and link rels...

[justsomeguy]

You're including jQuery twice, that's a problem.

[laurihasko]

If I take this line off, nothing works. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> This line is useless. <script src="jquery/development-bundle/jquery-1.8.0.js"></script> ..anyway this Timepicker doesn't interact with Datepicker.. I mean Timepicker doesn't work by itself.. but thank you all the help, and sorry my english

Edited September 19, 2012 by laurihasko

[justsomeguy]

You may need to change the order that you include things in. You should include jQuery first, and decide which version you need to include based on whatever else is using it, and after including jQuery then you can include the various plugins and things for it.

[laurihasko]

Ok.. there is good reason to check which order include things, thanks. I couldn't get Timepicker to work, so I tried different Timepicker and that works.

[smiles]

For simple, the files and folders hierarchy will be like below - test.html- jquery-ui-1.8.20.custom.css- jquery-ui-1.8.20.custom.min.js- jquery-1.7.2.min.js- images- - - - ui-icons_cd0a0a_256x240.png- - - - ...- - - - ... and in your test.html

<link type="text/css" rel="stylesheet" href="jquery-ui-1.8.20.custom.css" /><script src="jquery-1.7.2.min.js"></script><script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>

That's all! You dont have to worried about which jQuery ui should be imported.

Edited September 20, 2012 by smiles

[laurihasko]

Thanks smiles! I know that I am not a good programmer.. But web and everything in it is my life.. It is so interesting and I want to learn more every day.