Adding a timepicker to a datepicker

Question

Has anybody used a time picker in this link?

http://trentrichardson.com/examples/timepicker/

I have already followed the steps in the link, I added the add-on.js file to my component and the css file inside, but when i change this code

var x = jQuery(this).attr("size");                  
    jQuery(this).datepicker({ minDate:"0"-120, maxDate: "0"-x,dateFormat:"yy-mm-dd" });

to this :

var x = jQuery(this).attr("size");                  
    jQuery(this).datetimepicker({ minDate:"0"-120, maxDate: "0"-x,dateFormat:"yy-mm-dd" });

nothing happens. I just want to add a timepicker to the datepicker I used from JqueryUI. Does joomla have something to do with this?

I used this code to load the javascript files from the link that I provided above :

$doc->addScript(JUri::base().'/components/com_subscription/media/js/jquery-ui-timepicker-addon.js');

$doc->addStyleSheet(JUri::base().'/components/com_subscription/media/css/jquery-ui-timepicker-addon.css');

here is a screenshot of the error when the page loads:

I was confused because from the link that I am following, it just used the .datetimepicker then it works, but when I use mine, it's not functioning.

The screenshot also displays $.ui is undefined, but that code came from the js file which was from the link I am following.

Answer 1

I think I know what the issue may be, you need to wrap your code around jquery's document ready like so:

jQuery(document).ready(function($){
    var x = $(this).attr("size");                  
    $(this).datetimepicker({ minDate:"0"-120, maxDate: "0"-x,dateFormat:"yy-mm-dd" });
});

Note that I have used jQuery(document) (the global scope) and then used function($) so that the dollar symbol is an alias. This will prevent possible conflicts.

Update:

You also need to ensure you're importing jQuery UI which you can do using Joomla's built in methods like so:

<?php
    JHtml::_('jquery.ui');
?>