Issue with Enabling/Disabling DateTimePicker Fields Based on Conditions in SAP UI5 Fragment

[srinivas_devarapalli]

Hi everyone,

I’m new to UI5 and currently working on a UI5 application that involves fetching employee details such as employee ID, name, last login time, and last logout time. In my application, I have a table where each row shows these details. An edit icon appears when either the last login or last logout time is available. If both fields are empty, the edit icon will not appear. The edit icon triggers the following function on press:

onEditPress : function(oEvent){
    var oSelectedValue = oEvent.getSource().getBindingContext("MODEL").getObject();
    var oSelectedRowModel = new sap.ui.model.json.JSONModel(oSelectedValue);
    this.getView().setModel(oSelectedRowModel, "selectedRow");

    if(!this._editLoginLogOutDialog){
        this._editLoginLogOutDialog = sap.ui.xmlfragment("fragment.EditLoginLogout", this);
    }
    this.getView().addDependent(this._editLoginLogOutDialog);
    this._editLoginLogOutDialog.open();
}

This opens a fragment dialog to edit the last login and logout times. The values are passed correctly, and I’m using formatters to enable or disable the fields based on the following logic:

• If both last login and last logout have values, both fields should be editable.
• If one field has a value, that field should remain editable, and the other should be disabled.

This is the fragment code

<DateTimePicker
placeholder="YYYY/MM/DD HH:MM:SS"
width="450px" class="sapUiLargeMarginBottom"
displayFormat="yyyy-MM-dd HH:mm:ss"
value="{selectedRow>/LastLogin}"
valueFormat="yyyy-MM-dd HH:mm:ss"
enabled="{parts: ['selectedRow>/LastLogout', 'selectedRow>/LastLogin'], formatter: '.isLoginEnabled'}" />

<DateTimePicker
placeholder="YYYY/MM/DD HH:MM:SS"
width="450px" class="sapUiLargeMarginBottom"
displayFormat="yyyy-MM-dd HH:mm:ss"
value="{selectedRow>/LastLogout}"
valueFormat="yyyy-MM-dd HH:mm:ss"
enabled="{parts: ['selectedRow>/LastLogin', 'selectedRow>/LastLogout'], formatter: '.isLogoutEnabled'}" />

Here are the formatters:

isLoginEnabled: function(sLastLogout, sLastLogin) {
    if ((sLastLogin && sLastLogin !== "") && (sLastLogout && sLastLogout !== "")) {
        return true;
    }
    if (sLastLogout && sLastLogout !== "") {
        return false;
    }
    return true;
},

isLogoutEnabled: function(sLastLogin, sLastLogout) {
    if ((sLastLogin && sLastLogin !== "") && (sLastLogout && sLastLogout !== "")) {
        return true;
    }
    if (sLastLogin && sLastLogin !== "") {
        return false;
    }
    return true;
},

The issue:
The code working fine, but when the user removes the value from one field (either last login or last logout), the other field becomes editable, which should not happen. I need to prevent this behavior.

Alternate approach I'm considering:
To avoid this issue, I’m thinking of disabling manual input so that users can only select values using the DateTimePicker popup and not manually type into the fields. I’ve tried various methods, but I haven’t been able to disable manual input while still allowing value selection through the popup.

Has anyone faced a similar issue or knows how to implement this behavior? Any advice would be greatly appreciated.

Thanks in advance!

SAPUI5 

SAP Young Thinkers 

[srinivas_devarapalli · Accepted solution]

Hi everyone,

I managed to solve the issue by preventing manual keyboard input in the DateTimePicker fields, ensuring users can only change the values using the DateTimePicker popup. Here's how I did it:

1. Add a custom CSS class to the DateTimePicker fields:
I added a class 'noKeyboardInput' to the DateTimePicker fields in the fragment. Here's an example:

<DateTimePicker
placeholder="YYYY/MM/DD HH:MM:SS"
width="450px" class="sapUiLargeMarginBottom noKeyboardInput"
displayFormat="yyyy-MM-dd HH:mm:ss"
value="{selectedRow>/LastLogin}"
valueFormat="yyyy-MM-dd HH:mm:ss"
enabled="{parts: ['selectedRow>/LastLogout', 'selectedRow>/LastLogin'], formatter: '.isLoginEnabled'}" />

2. Add the following CSS in the 'style.css' file:
The CSS disables keyboard interactions without affecting the popup:

.noKeyboardInput input {
pointer-events: none;
}

With this approach, users can not type values into the DateTimePicker fields but can still select values using the popup

I hope this helps anyone facing a similar issue. Feel free to reach out if you have any questions!