Can we update input type values on readonly forms

[Nitin1337]

There is a date field on the entity form(readonly) which is of input type and it is having a data-behaviour="userlocal" which is showing the date to User local time zone.

I was trying to update the value of this field using jquery attr() and prop() but saw other posts which suggested that it only changes the values in DOM not on UI.

So, I was wondering if there is any way to show the UTC time on this field instead of user local time. (without changing the Date Behavior in schema of field)

In code value for input type is already in UTC time zone but on form(UI) it is showing as user local datetime (i think due the data-behavior="userlocal")

Is there any way to show the UTC value on form or update the input type attributes so that it will only show utc date and time.

In Code:

On UI:

[Atiour]

@Nitin1337 

You can try this javascript.

 $(document).ready(function(){   
    // Get field value 
   var stdregistrationclosedatetime = $("#stdregistrationclosedatetime").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();  
   
   // Convert date
   var registrationclosedatetime  = new Date(stdregistrationclosedatetime)  
   
   // Convert UTC 
   var utcDate = registrationclosedatetime.toUTCString();
   
  });   

Regards

Mohammad

[Nitin1337]

Hi @Atiour  Thanks for reply. The date value in input type is already in UTC time zone(2022-01-20T09:20:11.0000Z) but I think due to data-behavior="UserLocal" it is displaying user local on UI. I wanted to show this time on the form level but its showing converted time (user local time).

[Fubar]

Is it still being parsed by the DateTimePicker control? if so, you would probably need to update the control (not sure that it works but the DateTimePicker has locale and timeZone functions, but the other option would be to set the defaultDate) 

// if it is being parsed by the the datetime picker 
// you can see the functions that are exposed by putting the following into your browsers F12 console
$("#your_fieldname")  // input control
   .next()   // the date picker container
   .data("DateTimePicker") // the date picker object
   );