Duedate Popup needs to appear once I click on that Task - calendar

Question

I'm having the Bpmn with the user and server task with no duedates. when I click on the corresponding task, duedate calendar popup needs to appear. After I select the date only, it have to move to the next Task
I have used the activiti:dueDate="${dateVariable}" in the Bpmn. But I'm not getting any popup
<serviceTask id="GenerateFirstPassDesignerReviewSetVariables" name="Generate First Pass Designer Review Set Variables" activiti:class="com.hcp.core.actionhandlers.HcpSetGlobalVariablesActionHandler" activiti:dueDate="${dateVariable}">
<activiti:field name="variableNames" stringValue="DesignerReviewNextTask"/>
<activiti:field name="values" stringValue="GenerateFirstPass"/>
</serviceTask>
here is the js file of date variable:
Core.Action({
id: 'dateVariable',
icon: 'calendar',
invoke: function (context) {
return new Promise(function (resolve, reject) {
var oldDate,
valid = false,
task = Ember.get(context, 'task'),
tasks = Ember.get(context, 'tasks'),
data = [];
if (tasks) {
// If all tasks here already have a common date, detect that and use it.
oldDate = tasks.reduce(function (cur, next) {
if (cur === null || Ember.get(cur, 'dtDue') === Ember.get(next, 'dtDue')) {
return next;
}
return null;
}, null);
if (oldDate !== null) {
oldDate = Ember.get(oldDate, 'dtDue');
}
} else if (task) {
oldDate = Ember.get(task, 'dtDue');
}
oldDate = oldDate ? Date.fromString(oldDate) : new Date();
var focusTracker;
$.timepicker.dialog(oldDate.format('%Y-%m-%d'), null, {
modal: true,
showTime: false,
showTimepicker: false,
dateFormat: 'yy-mm-dd',
stepMinute: 1,
beforeShow: function (date, dp, tp) {
requestAnimationFrame(function () {
dp.dpDiv.find('.ui-state-active').focus();
}.bind(this));
},
onShow: function (dp) {
dp.dpDiv.find('.ui-state-active').focus();
dp.dpDiv.on('focusout', function (e) {
if (e.relatedTarget === null || !dp.dpDiv[0].contains(e.relatedTarget)) {
requestAnimationFrame(function () {
$(e.target).focus();
});
e.preventDefault();
return false;
}
});
},
onSelect: function (date, dp) {
valid = true;
requestAnimationFrame(function () {
dp.dpDiv.find('.ui-state-active').focus();
}.bind(this));
},
onClose: function (date) {
if (valid) {
date = Date.parse(date);
if (oldDate !== date) {
Core.Action('Core:updateTask', context, { dtDue: date }).then(resolve, reject);
}
}
}
});
});
},
isValid: "(isTask || areTasks) && isWorkflowAdmin && isOpenTask"
});
I need the due date calendar popup when I click on the task menu.