Using jQuery datepicker in embedded forms


I’ve been trying to use jQuery UI datapicker in an embedded form but kept getting error stating .datapicker() is not a function. I wrapped it up in $(document).ready(...) and also tried setting a timeout to make sure jquery-ui.js is being imported.

<p>Date: <input type="text" id="datepicker"></p>
  $(document).ready(function() {
    if($( "#datepicker" ).datepicker) {
      console.log('datepicker() exists');
      $( '#datepicker' ).datepicker();
    }else {
      console.log('datepicker() doesnt exist');

For example code above, first time I open the form on Camunda Tasklist page, datepicker() function doesn’t exist, so it enters else {...}, if I swap to another Task and then back to the one with my form, it all works fine, but if I again swap away and back datepicker once more won’t work even though console.log('datepicker() exists') executes.

Hi @lperkovic

it might be helpful to embed jquery ui here:

Hi @lperkovic,
angular-ui bootstrap directives can be used in the embedded forms. See below link for datepicker component

1 Like