Skip to Content
Author's profile photo Former Member

sap.m.DatePicker prevents keyboard manual date entry


There were many places in SAPUI5 application , where date was the input field and I used sap.m.DatePicker. For those places, user were able to enter date by clicking the calendar icon or by typing dates manually.

Manual typing of date requires many validations to be checked hence was looking for a solution by which I could restrict user to provide date by clicking calendar icon only.

Finally able to solve the problem by the following code placed in the init method of the controller:

onInit : function() {

sap.m.DatePicker.prototype.onAfterRendering = function (e) {

$(‘#’+e.srcControl.getId()+”-inner”).prop(‘readonly’, true);




sap.m.DatePicker.prototype.onAfterRendering will be called every time once the datepicker is rendered into the view and a dynamic ID of the date picker will be generated.

e.srcControl.getId() will get the dynamic ID of the date.

$(‘#’+e.srcControl.getId()+”-inner”).prop(‘readonly’, true); will fetch the inner html element and set the read only property as true.

Only Calendar icon can be used to select date which reduces number of validations for the date format.


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      That's a nice "hack", but I'd strongly discourage altering DOM elements directly. This, combined with overriding onAfterRendering (instead of using addEventDelegate), makes the app anything but future-proof for further development.

      Please read "Coding Issues to Avoid" from the dev guide.