Datepicker is not a function

• wullaski

• March 3, 2016 at 3:03 am

I’m using Advanced Custom Fields Pro Version 5.3.5 and WordPress 4.4.2. I’m getting this error in the console:

Uncaught TypeError: this.$input.addClass(…).datepicker is not a function

acf.fields.date_picker.acf.field.extend.initialize @ acf-input.min.js?ver=5.3.5:1(anonymous function) @ acf-input.min.js?ver=5.3.5:1c @ acf-input.min.js?ver=5.3.5:1t @ acf-input.min.js?ver=5.3.5:1acf.do_action @ acf-input.min.js?ver=5.3.5:1acf.fields.acf.model.extend._ready_field @ acf-input.min.js?ver=5.3.5:1c @ acf-input.min.js?ver=5.3.5:1t @ acf-input.min.js?ver=5.3.5:1acf.do_action @ acf-input.min.js?ver=5.3.5:1(anonymous function) @ acf-input.min.js?ver=5.3.5:1m.extend.each @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2m.fn.m.each @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2acf.fields.acf.model.extend._ready @ acf-input.min.js?ver=5.3.5:1c @ acf-input.min.js?ver=5.3.5:1t @ acf-input.min.js?ver=5.3.5:1acf.do_action @ acf-input.min.js?ver=5.3.5:1(anonymous function) @ acf-input.min.js?ver=5.3.5:1j @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2k.fireWith @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2m.extend.ready @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2J @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,jquery…:2

• John Huebner

• March 3, 2016 at 5:20 am

At a guess, I say this is because you’re using a plugin that compacts all the JS and the JS for ACF is not being localized properly.

• yousan

• March 7, 2016 at 1:47 am

I got same error.

The reason is that Javascript is loaded before acf_form() generating ACF elements.

Bad case.

<?php
acf_form_head(); // <-- bad!
get_header();
?>

<?php acf_form(...); ?>

Correct.

<?php
get_header();
acf_form_head();  // <--- here!
?>

<?php acf_form(...); ?>

• John Huebner

• March 7, 2016 at 4:50 am

This makes sense, but the code the order give by @yousan will cause other problem, like a “headers already sent” error.

If you must do this then I would suggest adding an output buffer to prevent the error, and to be honest I’m not sure this won’t cause other problems.

<?php 
  ob_start();
  get_header();
  acf_form_head();  // <--- here!
  echo ob_get_clean();
?>