CODEWITHSUNDEEP
jquery
user1157690
user1157690

Reputation: 373

Setting up the datetime picker

I'm really new to web development, in my web i need to have datetime picker and im trying to use trentrichardson's datetime picker, Unfortunately i was unable to make it work. this is my javascript

<script>
    $(function() {
        $( "#datepicker" ).datetimepicker();
    });
</script>

can any one help me, how to set up this datetime picker..

Upvotes: 0

Views: 13070

Answers (5)

ambassallo
ambassallo

Reputation: 970

with HTML5 this is as simple as:-

<input type="datetime-local" name="bdaytime">

edit:- I have found that this might be at risk of being removed so do some googling if you are using it in the future just to mmake sure it does not get deprecated.

Upvotes: 0

Murtaza
Murtaza

Reputation: 3065

firstly you will need to download the javascript file and the css stylesheet file for calendar.

to download you this link http://trentrichardson.com/examples/timepicker/

Once you have downloaded the file create a html file and refer to the style and javascript to this downloaded files also remember you add jQuery Library file in your HTML.

Create the HTML as per the need and use the script in you DOM ready. 

$(document).ready(function ()
{
    $( "#datepicker" ).datetimepicker();
});

note: #datepicker id the ID of the html element where you need the calendar to pop up .

You can also read the readme provided with the download.

jQuery Timepicker Addon

Use

  • To use this plugin you must include jQuery and jQuery UI with datepicker and slider
  • Include timepicker-addon script
  • now use timepicker with $('#selector').datetimepicker() or $('#selector').timepicker()

Contributing Code - Please Read! -------------------------------- All code contributions and bug reports are much appreciated. Please be sure to apply your fixes to the "dev" branch.

copied from the readme file which was downloaded along with the files.

Upvotes: 2

Amar Palsapure
Amar Palsapure

Reputation: 9680

With very less information from OP, I will give a try.

Your code should look like this (considering you have a folder js in your root folder, with all the javascripts. 

<html>
  <head>
     <!-- Add your CSS file here -->

     <!-- Add your Java Script files here -->       
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
     <script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
     <script type="text/javascript">
     $(function(){
         $( "#datepicker" ).datetimepicker();
     });
     </script>
  </head>
  <body>
    <input type="text" name="datepicker" id="datepicker" />
  </body>
</html>

For javascript to work, all the components required by the javascript function should be pre-loaded on client browser.

Inside head tag the suggested order is

  1. CSS: Include CSS first, so that browser gets it first, and render website correctly.
  2. JavaScripts: Once it is render properly, javascripts should be loaded so that user can interact with the website.
  3. Inline Javascript : (if any, considering you are using some components from the pre-loaded libraries.

Hope this works for you.

Upvotes: 4

Gopesh
Gopesh

Reputation: 3950

Try to load jquery library file and the datetimepicker plugin. Debug Tips:

Press ctrl + shift + j (Firefox) for error console

it will display the jquery or javascript errors

Upvotes: 2

DerDee
DerDee

Reputation: 392

Did you load jQuery? think its even better to put this functionality on the page after it's loaded by:

$(document).ready(function ()
{
    $( "#datepicker" ).datetimepicker();
});

Upvotes: 1

Related Questions