sap.m.DatePicker prevents keyboard manual date entry

Hi,

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);

};
…
…
..
}

Explanation:

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.

Cheers!!!!!