How can I disable the TimePicker in a form?

Hello,


I have a TimePicker inside of a Form, when I disable the form depending on a condition, all the fields within the form are disabled except of the TimePicker it is still editable which should not be the case, even when I set that specific field's Enabled= False, I still can edit it, which is weird!


Does anyone know about it?

Thank you so much for your help. 

Solution

Hey Khouloud,

I think this is a bug. I do have a possible workaround.

Place a container around the timepicker and add the css: 'pointer-events: none;'. You can do this in the extended properties using the same condition as you use to disable the form.

Solution

Hi khouloud khezami,


If you are okay to use javascript and your condition check is in screen action you can use "RunJavascript" action which is in HTTPRequestHandler module(OS provided). and apply styles or display property to that particular html element.

OR

Create a Boolean local variable and keep that as Enable property of your container and in your action change the value of this Boolean variable accordingly and do ajax refresh of that container. 




Thanks

Ramakrushnarao Seera

Usually, it should not show if you set Enable=False for that associated input.

Can you please add a few screenshots here to get a better idea. (Properties of input and timepicker)

Sam Rijkers wrote:

Hey Khouloud,

I think this is a bug. I do have a possible workaround.

Place a container around the timepicker and add the css: 'pointer-events: none;'. You can do this in the extended properties using the same condition as you use to disable the form.


This solution works, now I cannot edit the timepicker HOWEVER I want it to be editable for some users and non-editable for others, how can I make a condition on the which css to apply on a container based on the role of the user? 

Hi khouloud,

In the extended properties, you can conditionally apply styles and classes. A possible solution could be something like this:


EDIT: If you want to add a class instead of inline css style, replace style with class, and add the css classname specified in the stylesheet instead of pointer-events: none;.

Ramakrushnarao Seera wrote:

Hi khouloud khezami,


If you are okay to use javascript and your condition check is in screen action you can use "RunJavascript" action which is in HTTPRequestHandler module(OS provided). and apply styles or display property to that particular html element.

OR

Create a Boolean local variable and keep that as Enable property of your container and in your action change the value of this Boolean variable accordingly and do ajax refresh of that container. 




Thanks

Ramakrushnarao Seera


I already tried the second solution and it didn't work because even if you set the Enabled to false it is still can be editable!




Can you please share the link to this page if it is anonymous, If not public you can share personally.
And Also select timepicker and send its property too.