Trigger Server roundtrip for date field
The date picker for a date input field is made using javascript on client side. To trigger a round trip , you have to write some code on client side.
Code mentioned below has to be written on .htm page of the view.
<script>
thtmlbCalendar.pick = function(e) {
var o = (e.target) ? e.target : e.srcElement;
var sId = this.lastInstance;
var oInput = thtmlbGetElement(sId);
if (o.id === “currentDate”) {
e.cancelBubble=true;
return;
}
var currentDateValue = document.getElementById(‘currentDate’).value;
while (o.tagName != “TD”) {
o = o.parentNode;
if (o == null){
return;
}
}
var sDay = o.id;
if (sDay==null || sDay==“”){
return;
}
if (sDay) {
var aDate = sDay.split(“-“);
var arrValue = [];
arrValue[0]=parseInt(aDate[2]);
arrValue[1]=parseInt(aDate[1]);
arrValue[2]=parseInt(aDate[0], 10);
var newValue = this.getFormattedDate(arrValue[0], arrValue[1], arrValue[2]);
thtmlbSetInputFieldAttribute(oInput, ‘encodedValue’, newValue);
e.cancelBubble=true;
oInput.focus();
this.hide();
var element_event = sId + “:submitonenter”;
htmlbSL(this,2,element_event,‘0’);
}
};
</script>
You don’t need to change anything in the above code.
If you want to avoid writing the code on .htm page then you can also write the above code in a js file and upload in your component through tcode se80->MIME repository->SAP->BC->BSP->SAP->Your component name->right click for Import MIME Objects->select your JS file.
After the js file upload is complete, include js file in your htm page.
<script type=“text/javascript” src=“/sap/bc/bsp/sap/your_compoent_name/your_js_name.js”></script>
Thanks and Regards,
Ritu
Thank you! Worked like a charm! 🙂
Was stuck at this part for a long time. It works perfectly.Thanks a ton Ritu 🙂
Thanks for this solution. I have developed it a bit further.
Sharing my approach:
This will trigger submitonenter when the user picks a date with the date picker and also when entering a value in the date input field.
As you see the main part has been reduced to:
Hi Andre,
I tried implementing the same for table view but its nor working. Do you have idea how can it work for a date field on a table view? I think there is an issue with the element id. My table field name is 'CONTSTART' so is the below statement correct?
" var dateField = thtmlbGetElement("<%= controller->component_id %>CONTSTART");"
Thanks & Regards,
Ajeet Gautam
Hi,
I used Andre´s approach and found out myDateField value like so:
Like so, I was able to find out how my field name is being comprised (e.g. _btdate_table[2].date_from)
But I found out another complication, since I used this JavaScript code, I am unable to select year from the datePicker manualy. Whenever I try to write different year on Web UI, it fires server roundtrip. Somehow I have a feeling it is due to the fact, that year column is directly in front of the field that is being handled. But I am still rather unsure. It would be nice if someone gave a feedback, whether they have encoutered something similar during implementation.
Best Regards.
Hi,
Now i have implemented the code and unfortunately server event is getting triggered only for transactions which are already stored in database from webUI. Means that if i go to Solution manager web UI and navigate to already existing charm ID and select a date from calendar its working fine, but if we are creating charm in WEB UI then if we select calendar then it is not working.
I am not sure where it is going wrong, Could you please help me here.
Thanks
Best Regards,