Date input is supported using an <input type="text"> control.

Binding to a Process Variable

To bind the input field to a Java Date variable, the directivecam-variable-type="Date" must be used.

Example:

  1. <input type="text"
  2. cam-variable-name="CONTRACT_START_DATE"
  3. cam-variable-type="Date" />

Date Format

Currently only the ISO Date Format yyyy-MM-dd'T'HH:mm:ss is supported.Example value: 2013-01-23T13:42:42

Using a Date Picker

The Form SDK itself does not provide any custom components or widgets. As such it also does not provide a date picker. However, you can integrate third party libraries providing such widgets or write one yourself (see Custom JavaScript).

Inside Camunda Tasklist, datepicker support is provided through Angular UI.

You can use the Angular UI datepickerdirective to offer a datepicker for the date input field. The complete markup of the input fieldincluding the datepicker button is shown below.

  1. <p class="input-group">
  2. <input type="text"
  3. cam-variable-name="CONTRACT_START_DATE"
  4. cam-variable-type="Date"
  5. class="form-control"
  6. datepicker-popup="yyyy-MM-dd'T'HH:mm:ss"
  7. is-open="dateFieldOpened" />
  8. <span class="input-group-btn">
  9. <button type="button"
  10. class="btn btn-default"
  11. ng-click="open($event)">
  12. <i class="glyphicon glyphicon-calendar"></i>
  13. </button>
  14. </span>
  15. </p>

In addition to the HTML markup, the following JavaScript must be included in the form file(see Custom JavaScript):

  1. <script cam-script type="text/form-script">
  2. $scope.open = function($event) {
  3. $event.preventDefault();
  4. $event.stopPropagation();
  5. $scope.dateFieldOpened = true;
  6. };
  7. </script>

The attributes of the datepicker component are explained below:

Additional attributes of the input element:

  • datepicker-popup="yyyy-MM-dd'T'HH:mm:ss": This attribute sets the format of the date whichis returned by the datepicker. It must be the ISO Date Format.
  • is-open="dateFieldOpened": This attribute contains the name of the variable, whichindicates the open status of the datepicker. It must be the same variable, which is set totrue in the open function in the JavaScript snippet. If a form contains multipledatepickers, they must have different values for this attribute.
    Attributes of the datepicker button:

  • ng-click="open($event)": This attribute contains the name of the function which is calledwhen the datepicker button is clicked. It must be the function name of the JavaScript snippetwhich sets the is-open variable to true. If a form contains multiple date pickers, theymust have different function names, or the name of the is-open variable must be passed tothe function.

原文: https://docs.camunda.org/manual/7.9/reference/embedded-forms/controls/date-inputs/