Forums

Hi

I'm using a datepicker where users have to select their birth date, after that their age is calculated with some javascript code i found on this forum.

When I run the form in preview mode the code runs without error but on the front end nothing happens. I suppose this has something to do with the version of jquery but i cannot seem to figure out how to solve this.
If I inspect the page in chrome i get the following error:

(index):307 Uncaught TypeError: jQ(...).datepicker is not a function
    at HTMLDocument.<anonymous> ((index):307)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

the code (part of) I used you can find below.

jQuery(document).ready(function(jQ) {
  var age, Geboortedatum;

  jQ("#Geboortedatum").datepicker({
    onClose: function() {
      Geboortedatum = jQ("#Geboortedatum").val();
      age = getAge(Geboortedatum);
      jQ("#Leeftijd").val(age);
      
  function getAge(dateString) {
    var birthDate = new Date(dateString);
    var age = seizoen - birthDate.getFullYear();
    var m = 8 - birthDate.getMonth();
    if (m < 0 || (m === 0 && 24 < birthDate.getDate())) {
      age--;
    }
    return age;
  };

    }
  });
});

Does anybody have a solution for this?

Thanks for your help!

Hi Jasper,

Is this v6 or v5 ? v6 does not have a datepicker function, so the error is caused by something else on your page and needs to be fixed.

You can assign a "change" event to the calendar field and in that change field you can call a function to do any processing you need.

Best regards,
Max

Hi max

thanks for your reply

I'm using chronoforms V6 on wordpress.

If I go to the calendar element in the designer tab I cannot see the events section as for textboxes, am I looking at the correct place? (screenshot in attachement)

that is why I tried to catch the change of birthdate in the javascript code. The code itself works perfectly fine in preview mode, only at frontend it fails. Also another part of the javascript does work at frontend side so I guess it must be something in this part of the code:

jQ("#Geboortedatum").datepicker({
onClose: function() {

Is there an alternative function I can use withing javascript which can be used in V6?

kind regards
Jasper

Hi Jasper,

The error reported is related to the ".datepicker" call, are you sure that you have loaded the file required for this function ? because Chronoforms does not have this method.

Are you trying to get the use the value of the Calendar field in Chronoforms v6 ?

Best regards,
Max

Hi I didn't load any extra files, and I also don't know how to.

Indeed, I just want to execute this function at the moment a user selects his birthday, is there another way I can trigger a function when a date is selected in the datepicker in CFv6?

Hi Jasper,

I understand from the code that you want to calculate the year difference when a date is selected ? if yes then the newest Chronoforms update has support for this, so only few lines of code are needed, few minor changes are needed before it's available for download in the downloads section.

But if you are in a hurry then I can help you with the custom way to do it using your code, let me know.

Best regards,
Max

Hi max

That is what I need to do, I already got the calculation working. I just need to be able to trigger the function when the birthdate is selected.

If the new release will be there in a couple of days, that's fine for me, but if it would become weeks I would like to get some help on the custom way.

Kind regards
Jasper

Hi max

any idea about the release date yet?

gr
Jasper

Well, the custom way then:
In a JavaScript element, use the following code:

$("#calendar_id").on("change", function(){

Geboortedatum = jQ("#Geboortedatum").val();
age = getAge(Geboortedatum);
jQ("#Leeftijd").val(age);

function getAge(dateString) {
var birthDate = new Date(dateString);
var age = seizoen - birthDate.getFullYear();
var m = 8 - birthDate.getMonth();
if (m < 0 || (m === 0 && 24 < birthDate.getDate())) {
age--;
}
$("#calendar_id").val(age);
};

});

Make sure the add in "dom ready" is enabled.
Make sure you use the real field id, and to use "$" but not jQ

Best regards,
Max

hi max

that's what if first tried, but it doesn't work either. If I recall correctly, it did work in CF5 but after i updated to 6 it didn't work anymore. the on.("change" part doesn't work in my case.

in the meantime I just added a part of the jquery ui code ( https://code.jquery.com/ui/1.12.1/jquery-ui.js ) in a separate javascript element and now the .datepicker on close function works. It's definitely not the best solution (now when the datepicker is opened it also opens the standard jquery datepicker next to it) but at least it is functional.
So now I can wait for the new release of CF to do it the proper way.

kind regards
Jasper