Multiple date picker controls in embedded form

Camunda 7 Topics Discussion & Questions
1

Hello

I would like to have multiple date pickers available for a user to choose a start and end date within an embedded form. However when the user choose a date in the date picker, it populates the chosen date in both fields.

I have googled and found this is a common problem with ui-bootstrap. The problem is that most examples want to use different ng-models. I am concerned that approach will not work with the Forms SDK since I think the ng-model is inherited with the Forms SDK.

Please see how other suggested to solve this problem outside Camunda.

Does anyone have a sample markup to use multiple date pickers in an embedded form?

Thanks
Greg

Currently the markup I am using looks like the following.

 <p><strong>Start Date</strong></p>
            <p class="input-group">
    		  <input type="text"
    		       cam-variable-name="concept_development_start_date_dt"
    		       cam-variable-type="Date"
    		       class="form-control"
    		       datepicker-popup="yyyy-MM-dd"
    		       is-open="dateFieldOpened" />

    			  <span class="input-group-btn">
    			    <button type="button"
    			            class="btn btn-default"
    			            ng-click="open($event)">
    			      <i class="glyphicon glyphicon-calendar"></i>
    			    </button>
    			  </span>
    		</p>

     <p><strong>End Date</strong></p>
            <p class="input-group">
    		  <input type="text"
    		       cam-variable-name="concept_development_end_date_dt"
    		       cam-variable-type="Date"
    		       class="form-control"
    		       datepicker-popup="yyyy-MM-dd"
    		       is-open="dateFieldOpened" />

    			  <span class="input-group-btn">
    			    <button type="button"
    			            class="btn btn-default"
    			            ng-click="open($event)">
    			      <i class="glyphicon glyphicon-calendar"></i>
    			    </button>
    			  </span>
    		</p>
2

As with most of my complex forms, I do not use the cam-variable directives and bind the angular scope variables directly to the forms variableManager.

Check the docs:
https://docs.camunda.org/manual/7.4/reference/embedded-forms/javascript/lifecycle/#implementing-custom-fields

2 Likes
3

Hi,

you must change this in the second datepicker
is-open="dateFieldOpened" to f.e. is-open="dateFieldOpened2"

ng-click="open2($event)"

an your javascript also:

$scope.open2 = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.dateFieldOpened2 = true;
};

something like that. it should work.

2 Likes
4

Thank you. Both solutions worked

5

question: does your date-picker effectively work? As there is a bug which prevents us to use datepickers in Camunda embedded forms:

https://app.camunda.com/jira/browse/CAM-4746

got it working, ok

6

Nico,

I was using the latest alpha build and everything worked fine for me.

Thanks
Greg

7