Using jQuery datepicker in embedded forms

Hello,

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');
      console.log($('#datepicker'));
    }
  });

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: https://docs.camunda.org/manual/7.8/webapps/tasklist/configuration/#custom-scripts

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

http://angular-ui.github.io/bootstrap/versioned-docs/0.12.0/#/datepicker

1 Like