April 16, 2012

Jquery DateTimePicker not visible

Question by patxy

I’m trying to implement this http://trentrichardson.com/examples/timepicker/ to my project.

The problem is that nothing happens.

So, here is what I’ve done and not removed :

-I’ve downloaded the .js file and put it inside the “Scripts” file.
-I added a reference to this script that way :

<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>

I’ve added this at the beginning of the page :

 <script type="text/javascript">
$(function () {
    $('.datetime').datetimepicker();
});
 </script>

I’ve added this at the end of the css file :

 /* css for timepicker */
 .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
 .ui-timepicker-div dl { text-align: left; }
 .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
 .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
 .ui-timepicker-div td { font-size: 90%; }
 .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

And I’ve also this :

 <input type="text" class="datetime" id="datetime1" value="" />

The problem is that there is only the textbox that is displayed. The timepicker isn’t. What haven’t I well understand?

Answer by Tats_innit

Here you go demo for you as well : http://jsfiddle.net/atP2P/

HTML

class was missing

<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

<input type="text" name="datetime" id="datetime1" class="datetime" value="" />
​

Answer by Starx

Your are using class .datetime while initializing the plugin. So your HTML should have class in them

 <input type="text" name="datetime" id="datetime1" class="datetime" value="" />

Demo

Or, you can initialize your plugin to select the id instead of the class like:

$(function () {
    $('#datetime1').datetimepicker();
});

Either way, it will work.

...

Please fill the form - I will response as fast as I can!