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.
