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? Commented Mar 23, 2015 at 8:10
  • hello sir, please see my updated post. Commented Mar 23, 2015 at 8:16
  • follow-up question: from the link that I provided above, is this possible to use in joomla? Commented Mar 23, 2015 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 Commented Mar 23, 2015 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. Commented Mar 23, 2015 at 8:24

1 Answer 1

Reset to default
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. Commented Mar 23, 2015 at 9:37
  • Try using my document ready please and let me know if you still have any issues Commented Mar 23, 2015 at 9:55
  • the error is still the same sir. Commented Mar 23, 2015 at 10:12
  • Please provide the full code you're using and put it in pastebin.com so I can see it Commented Mar 23, 2015 at 10:13
  • pastebin.com/kjRydZgi here is the code Commented Mar 23, 2015 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.