Readonly setting is not working as I aspected in schedule modal (startTime and endTime objects)

[Alex]

Hi,

I have a strange behavior in my schedule's modal. I would undestand if it's correct and If I can change this feature.

My code:

async onPopupOpen(args) {

    if (args.type === "Editor") {

      let { calendarShiftArray , shiftStatusArray, selectedShift, isCalendarPlan} = this.state;

      var startTimeElement = args.element.querySelector("#startTime").ej2_instances[0];

      var subjectElement =  args.element.querySelector("#subject");

      var endTimeElement = args.element.querySelector("#endTime").ej2_instances[0];

if (isCalendarPlan) {

        subjectElement.disabled = true;

        startTimeElement.readonly = true;

        endTimeElement.readonly = true;

      }

So if my calendar is planned (isCalendarPlan === true) I want to disable subject (turno) , startTime (inizio) and endTime (Fine)

With the setting shown above (<obj>.readonly = true) I can't edit the load date. I can't click on icon number 2 and 3 ( the datepicker and timepicker doesn't appear)

But When I click on icon 4 ( X appears only when mouse is on the object) the reset command works correctly.

I want to avoid this behavior. 

Thanks Alex

[Balasubramanian Sattanathan]

Hi Alex, 

Greetings from Syncfusion Support. 

We have validated your reported scenario at our end and let you know that we can hide the (x)clear icon by making use of the below code snippet. 

https://stackblitz.com/edit/react-gyibqv?file=index.js 

.e-start-end-row .e-start, 

.e-start-end-row .e-end { 

  pointer-events: none; 

} 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Alex]

Hi Balasubramanian S,

thanks for your answer.

I applyed your solution at my project succesfully.

Alex 

[Nevitha Ravi]

Hi Alex, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 

Nevitha