Datepicker not working after J 3.4. update

Hi

The datepicker does not work anymore after updating to Joomla 3.4.

Compare the form on J 3.3. http://www.travelcostarica.nu/rentalcar-reservation (working) with the J 3.4.form on http://gaggi.travelcostarica.nu/rentalcar-reservation (not working)

I have not made any changes and am loading the datpicker by "Loading JavaScript" in the Setup, using the code below:

$(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });

Any idea what needs to be updated here in order for the datepicker to work?

Thanks for your thoughts!

Hi pollito,

Please wrap your code in this:

jQuery(document).ready(function($){
  // your code goes here
});

Bob

Hi Bob
Thanks for your quick reply! Unfortunately, this didn't solve it.
The console tells me that there is an "Uncaught TypeError: undefined is not a function": http://i.imgur.com/F37t4QE.png

My JS is too weak to understand the message... but the code caused no problems on J3.3.

Any clue? Or is there a better (native) way to use datepicker in this context?

Thanks!
/Philipp

Hi pollito,

It looks as though Max may have renamed the CF datepicker to gdatetimepicker

Bob

Hmm, does that mean I have to change the JS like so?

jQuery(document).ready(function($){
$(function() {
    $( "#from" ).gdatetimepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).gdatetimepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).gdatetimepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).gdatetimepicker( "option", "maxDate", selectedDate );
      }
    });
  });
});

It still gives me no love:-(

Or am I wrong by calling the datepicker with the JS load function?

Best,
Philipp

Hi,

I suggest that you change the code to this:

jQuery(document).ready(function($){
    $( "#from" ).gdatetimepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).gdatetimepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).gdatetimepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).gdatetimepicker( "option", "maxDate", selectedDate );
      }
    });
});

And change to use "datepicker" again like in your original code, but I'm not sure which date picker is this, I think its the jQuery ui date picker, because its NOT the Chronoforms one, and in this case you must have the jQuery UI loaded on the new site.

Regards,
Max

Hi Max

Thanks for your reply! I still can't get it to work: http://gaggi.travelcostarica.nu/rentalcar-reservation
The UI resource should be present in the header (taken from http://jqueryui.com/datepicker/#date-range)

Maybe it's easiest if I use the CF native datepicker. Can you point me to the relevant resource? What would I have to do in order to get your above code to work?

Thank you and best regards,
Philipp

Hi Philipp,

Please try to use "jQuery" instead of "$" in your code.

Regards,
Max

Unfortunately that doesn't work:-(

Hi Philipp,

I think there's a FAQ on using the JQuery datepicker with ChronoForms v5, you may be able to adapt that. I also suggest that you use the JQuery Easy extension if you need to load a fuller version of JQueryUI than Joomla use.

Bob

Thank you Max, that did it!
To reiterate the solution:
Load CSS file: http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css
Load JS file: http://code.jquery.com/ui/1.11.3/jquery-ui.js
(only UI file needs to be loaded, as jquery is already integrated in J3)

Load JS Code:

jQuery(document).ready(function(jQuery){
    jQuery( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    jQuery( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
});