Jump to content
Sign in to follow this  
laurihasko

Adding a Timepicker to jQuery UI Datepicker

Recommended Posts

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 by laurihasko

Share this post


Link to post
Share on other sites

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 by laurihasko

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 by laurihasko

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by smiles

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...