Camunda Angular UI Datepicker

Camunda 7 Topics Discussion & Questions
,
1

Hi,

I am looking to use a datepicker within a custom embedded form in tasklist. From the reference (https://docs.camunda.org/manual/7.8/reference/embedded-forms/controls/date-inputs/) I read one can make use of http://angular-ui.github.io/bootstrap/ to accomplish this. What I would like to know is, is angular-ui already included in the embedded forms javascript imports or will I have to manually include it some how, as well as which version would be adequate for camunda 7.8?

The reason I am asking is that I have tried the example given on page (https://docs.camunda.org/manual/7.8/reference/embedded-forms/controls/date-inputs/) and nothing seems to be happening when you click on the datepicker button. I have checked chrome’s console but no errors pops up as if the datepicker directive is not being picked up. I have added the required JavaScript as well with now luck.

Any help would be appreciated.

Regards

2

I managed to solve this myself, just for anyone else wondering, I had to include the cam-script within the form tags otherwise it was not being picked up/loaded.

1 Like
3

Can you share that code?

4

You can follow the code example on this page: https://docs.camunda.org/manual/7.12/reference/embedded-forms/controls/date-inputs/#using-a-date-picker. The key was that this part of script:

<script cam-script type="text/form-script">
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.dateFieldOpened = true;
  };
</script>

Should be within the <form> tag.

5

i am using same code but onclick datepicker is not working.
can you share entire form

6

I unfortunately do not have access to the code anymore but looking in the camunda source code repository I found the following test case:

camunda-bpm-platform/engine/src/test/resources/org/camunda/bpm/engine/test/api/form/HtmlFormEngineTest.testRenderDateFieldWithPattern.html

<form name="generatedForm" role="form">
  <div class="form-group">
    <label for="dateField">
      Date Field
    </label>
    <div class="input-group">
      <input class="form-control" name="dateField" cam-variable-type="String" cam-variable-name="dateField" type="text" uib-datepicker-popup="yyyy-MM-dd" is-open="dateFieldOpeneddateField" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="opendateField($event)">
          <i class="glyphicon glyphicon-calendar">
          </i>
        </button>
      </div>
      <script cam-script type="text/form-script">
        $scope.opendateField = function ($event) { $event.preventDefault(); $event.stopPropagation(); $scope.dateFieldOpeneddateField = true; };
      </script>
    </div>
    <div ng-if="this.generatedForm.dateField.$invalid && this.generatedForm.dateField.$dirty" class="has-error">
      <div ng-show="this.generatedForm.dateField.$error.required && !this.generatedForm.dateField.$error.date" class="help-block">
        Required field
      </div>
      <div ng-show="this.generatedForm.dateField.$error.date" class="help-block">
        Invalid date format: the date should have the pattern 'yyyy-MM-dd'
      </div>
    </div>
  </div>
</form>

Also the key is that this is used within an embedded form on camunda by adding it to the same upload as the bpmn file including this in the start task of the form

 <bpmn:startEvent id="Test" camunda:formKey="embedded:deployment:myform.html">
7