0

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:

enter image description here

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.

Improve this question
5
  • How are you calling the JS file? – Lodder Mar 23 '15 at 8:10
  • hello sir, please see my updated post. – Break the Law Mar 23 '15 at 8:16
  • follow-up question: from the link that I provided above, is this possible to use in joomla? – Break the Law Mar 23 '15 at 8:17
  • Yes, it should still work in Joomla. When you view your site, are you getting any errors in the browser console log? Press F12 and check – Lodder Mar 23 '15 at 8:18
  • I updated my post again, please see screenshot. 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. – Break the Law Mar 23 '15 at 8:24
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');
?>
Improve this answer
9
  • I'm afraid my code is already wrapped around a document ready function but still the error exists.. datetimepicker is not a function. – Break the Law Mar 23 '15 at 9:37
  • Try using my document ready please and let me know if you still have any issues – Lodder Mar 23 '15 at 9:55
  • the error is still the same sir. – Break the Law Mar 23 '15 at 10:12
  • Please provide the full code you're using and put it in pastebin.com so I can see it – Lodder Mar 23 '15 at 10:13
  • pastebin.com/kjRydZgi here is the code – Break the Law Mar 23 '15 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.