I am trying to use a datepicker control in an embedded form as per the Camunda 7.5 documentation except I want it to only show the date part not the time.
So am using datepicker-popup=“yyyy-MM-dd”
as in this forum posting
But when I submit the form I get this message
“An error happend while submitting the task form : Value ‘2016-06-21’ is not of type Date”
If I revert to datepicker-popup=“yyyy-MM-dd’T’HH:mm:ss” the error no longer appears.
Surely there must be a way to hide the time part?
Hi,
you have to send the time information when submitting a field of type Date. For your scenario, you can set the datepicker to only have the date part, but you then have to hook into the submit event and add the time part to the value programatically. An example how to hook into the submit event can be found in the documentation.
Does this help you?
Cheers
Sebastian
Thanks very much for the suggestion but I am still struggling to get this to work.
Have tried like this:
...
<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>
…
<script cam-script type="text/form-script">
// Date Picker Function//
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.dateFieldOpened = true;
};
// Adjust date of birth on submit
camForm.on('submit', function() {
// Get value from date control
var dateVal1 = document.getElementById("date1").value;
alert("test1! " + dateVal1);
// Set it into process variable
var dateVal2 = new Date(dateVal1);
alert("test2!! " + dateVal2);
camForm.variableManager.variableValue("CONTRACT_START_DATE",dateVal2);
// Check value in process variable
var dateVal3 = camForm.variableManager.variableValue("CONTRACT_START_DATE");
alert("test3!!! " + dateVal3);
});
</script>
The alerts seem to show that the process variable has been set to a valid date but I then get an error message saying:
An error happend while submitting the task form :
Value ‘2016-01-02’ is not of type Date
I guess one option would be to drop the cam-variable-name and cam-variable-type attributes and create my date programmatically.
Will try that next.
Finally got this working with html:
<!-- Date Picker -->
<p class="input-group">
<input type="text"
id="date1"
class="form-control"
ng-model="ngdate1"
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>
and javascript:
// Date Picker Function //
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.dateFieldOpened = true;
};
// Lifecycle Event Handlers //
camForm.on('form-loaded', function() {
// Create a date variable
camForm.variableManager.createVariable({
name: 'CONTRACT_START_DATE',
type: 'Date',
value: null });
});
// Set angular variable to process variable value for rejected tasks
camForm.on('variables-applied', function() {
var ngdate1 = camForm.variableManager.variableValue('CONTRACT_START_DATE');
$scope.ngdate1 = ngdate1; });
// Add date to process variables on submit
camForm.on('submit', function() {
// Get value from date control and convert to date
var dateVal1 = document.getElementById("date1").value;
var dateVal2 = new Date(dateVal1);
camForm.variableManager.variableValue('CONTRACT_START_DATE', dateVal2); });